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

时间:2013-06-19 10:55:07

标签: javascript jquery

我想实现表行是可点击的。我通过在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()

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

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

1 个答案:

答案 0 :(得分:2)

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

来阻止事件冒泡到祖先
e.stopPropagation();

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

您也可以从事件处理程序执行return false,该处理程序同时执行stopPropagationpreventDefault