有没有一种优雅的方式来防止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。