阻止jquery動作按鈕裏面的點擊事件

Question

我有一個div，我已經添加了jquery點擊事件，所以當你點擊它將你帶到一個url。在同一個div裏面我有一個按鈕來刪除條目。不幸的是，與我的.click事件，當我點擊刪除它確實刪除它，但它也把我帶到了網址。如果點擊是通過按鈕完成的，如何防止.click事件被觸發？

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $(".clickable-row").click(function() { 
      if ($(this).data("href") !== "") { 
       window.open($(this).data("href")); 
      } 
     }); 
    }); 
</script> 


<div class="box gallery clickable-row" id="item" data-href="www.amazon.com"> 
<div class="box-head clearfix"> 
    <div class="left">ghjlhgoig</div> 
    <div class="right">$10</div> 
</div> 
<div class="box-content"> 
    <img src="/images/missing.gif"> 
    <form action="http://local.wishlist.com/lists/view/5" method="post" accept-charset="utf-8"> 
     <input type="hidden" name="itemId" value="19"> 
     <input type="submit" name="delete" value="Delete"> 
    </form> 
</div> 
</div> 

只是要清楚，如果我點擊刪除按鈕，我希望它提交表單，而不是發送給我的網址。

Answer 1

的點擊甚至從刪除按鈕向上傳播。有兩種方法可以解決這個問題。

（1）檢查從事件刪除按鈕向上冒泡：

$(".clickable-row").click(function(event) { 
    if (!$(event.target).is('input[name="delete"]')) { 
     if ($(this).data("href") !== "") { 
      window.open($(this).data("href")); 
     } 
    } 
}); 

（2）從傳播停止事件：

$('input[name="delete"]').click(function(event) { 
    event.stopPropagation(); 
}); 

Answer 2

從函數返回false。

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $(".clickable-row").click(function() { 
      if ($(this).data("href") !== "") { 
       window.open($(this).data("href")); 
      } 
      return false; 
     }); 
    }); 
</script> 

或者將輸入類型更改爲「按鈕」而不是「提交」，這將停止發佈表單。

好吧我明白你現在要問什麼。我認爲你的選擇如下：

1）在URL上添加一個重定向回到請求來自的頁面。

2）或者使用AJAX調用後。請參閱jQuery AJAX。

3）發佈到iframe（可能是最簡單的選項）。

Answer 3

編輯：好像你想要改變你的jQuery選擇器從.clickable行到只適用於打開新窗口的按鈕。

garryp是正確的。你也可以使用jQuery方法event.preventDefault（）;

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $(".clickable-row").click(function(event) { 
      event.preventDefault(); 
      if ($(this).data("href") !== "") { 
       window.open($(this).data("href")); 
      } 
     }); 
    }); 
</script> 

見jQuery的documentation