有沒有一種優雅的方式來防止JavaScript中的祖先點擊？

Question

我想實現該表的行是可點擊的。我通過改變光標懸停在CSS中，以及在錶行上實現一個點擊事件來實現這一點，該事件轉到data-href屬性中指定的鏈接。

問題是，錶行內部有一些按鈕，它們觸發了一個AJAX請求。所以，當我點擊這些按鈕時，我想阻止父行上的點擊事件。

這是我目前的實現（在CoffeeScript中）：

jQuery.fn.preventClick  = -> $(@).data("disabled", true) 
jQuery.fn.isClickPrevented = -> $(@).data("disabled") 
jQuery.fn.enableClick  = -> $(@).removeData("disabled") 

$("#table tr").click -> 
    window.location = $(@).data("href") unless $(@).isClickPrevented() 
    $(@).enableClick() 

$("#table tr").on "click", "[data-remote='true']", -> 
    $(@).closest("tr").preventClick() 

我依靠的事實，孩子click事件被父人之前觸發。

對我來說這看起來太複雜了。有沒有更好的方法來實現這一點？

Answer 1

內部事件處理程序，您可以通過調用

e.stopPropagation(); 

防止事件冒泡的祖先（你需要接受e作爲事件處理函數的第一個參數。）

您也可以從事件處理程序執行return false，該事件處理程序既執行stopPropagation也執行preventDefault。