Question

我想实现表行是可点击的。我通过在CSS中悬停时更改光标，并在表行上实现click事件来实现，该事件将转到data-href属性中指定的链接。

问题是，表行中有一些按钮会触发AJAX请求。因此，当我单击这些按钮时，我希望阻止父行上的click事件。

这是我当前的实现（在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()

我依赖于子点击事件在父点击事件之前触发的事实。

对我而言，这看起来太复杂了。有没有更优雅的方式来实现这个？

Answer 1

在事件处理程序中，您可以通过调用

来阻止事件冒泡到祖先

e.stopPropagation();

（您需要接受e作为事件处理函数的第一个参数。）

您也可以从事件处理程序执行return false，该处理程序同时执行stopPropagation和preventDefault。

有没有一种优雅的方法可以防止JavaScript中的祖先点击？

1 个答案: