Question

所以我在列表行中有一个按钮，用于从页面中删除行（调用ajax的东西来删除行所代表的对象，但这对我的问题并不重要）。整行绑定到一个click事件，该事件将重定向到另一个页面。

换句话说，单击绑定包含行并单击内部按钮，这会导致我出现问题，因为单击内部按钮也会触发包含行单击事件（应该如此）。

我已尝试为所有删除按钮绑定一个悬停事件，该按钮取消绑定鼠标悬停时的行点击，并在mouseout上重新绑定它，如下面的伪代码：

$('.delete-button').hover(
  function() {
    $('.list-row').unbind();
    $('.delete-button').bind('click', function() { /* delete action */ });
  },
  function() {
    $('.delete-button').unbind();
    $('.list-row').bind('click', function() { /* list row action */ });
  }
);

这不是很好，我相信有更好的方法可以解决它。我应该从包含列表行中取出按钮吗？由于我的列表行包含具有ajax调用所需数据的自定义属性，并且我只能var rid = $('.delete-button).parent().attr('row-id');来获取数据，但我不反对更改：）

谢谢！

Answer 1

在按钮的点击事件处理程序中，您需要调用e.stopPropagation()。这将防止事件冒泡DOM树。更多信息：http://api.jquery.com/event.stopPropagation/

<小时/> 编辑：你已经接受了（谢谢！），但也许这段代码片段可以帮助更好地解释一些概念：

$('.list-row').click(function() {
    /* list row action */
});

$('.delete-button').click(function(e) {
    // die, bubbles, die
    e.stopPropagation();
    // if you also need to prevent the default behavior for the button itself,
    // uncomment the following line:
    // e.preventDefault();
    // note that if you are doing both e.stopPropagation() AND e.preventDefault()
    // you should just `return false;` at the end of the handler (which is jQuery-
    // sugar for doing both of these at once)

    /* delete action */
})

Answer 2

有几种方法可以解决这个问题。正如@jmar777已经说过，您可以将更改的事件附加到按钮上的单击处理程序，停止传播。

如果你想使用与你应用于div相同的功能，那么你可以这样做：

if($(event.target).is("input")) {
      event.stopPropagation();
}

另一种方法是实际上不将click事件绑定到按钮，因为浏览器支持对包含元素的点击。因为你总会触发它，那么你实际上并不需要按钮来处理它！这确实要求你处理IE6等与其他一切有点不同但是......

Answer 3

让你的处理函数返回false

jQuery不同于包含div和按钮的内部绑定

3 个答案: