Question

我有一个dd项目列表。每个dd项都有一个连接到它的监听器（见下文），所以如果单击它我可以重建页面并更改一些东西。这些dd项目中的每一个都有一个复选框，虽然我希望将其从该监听器中排除（因此它可以被另一个监听器拾取）。

出现的问题是每当我点击dd中的任何地方时它将应用dd监听器，而不是复选框监听器，即使我点击了复选框。有没有办法区分究竟是什么被点击而没有在dd中设置div并单独应用监听器？

示例HTML代码：

<dl>
  <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox">
  </dd>
</dl>

示例jQuery代码：

$("class1.checkbox").live("click", function() {
  //Do some other, completely different, cool stuff
  //console.log($(this).parent().attr("id"));
  console.log("test");
});

$("dd.class1.class2").live("click", function () {
  //Do some cool stuff
});

Answer 1

您需要停止事件冒泡。

$(".class1:checkbox").click(function(e) {
    alert('clicked checkbox');
    e.stopPropagation();
});

$("dd.class1.class2").click(function () {
    alert('clicked dd');
});

http://api.jquery.com/event.stopPropagation/

“冒泡”的概念就好像你有一个带有click事件的子元素，并且你不希望它触发父元素的click事件。您可以使用event.stopPropagation()。

event.stopPropagation()基本上只说将此点击事件应用于此孩子节点并且不告诉父容器任何东西，因为我不希望他们做出反应。

事件捕获：

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

事件冒泡：

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

如果您使用live()或delegate()，则需要return false;，但可能无效。阅读下面的报价。

每JQuery docs：

由于.live（）方法在传播到的事件后处理它们在文档的顶部，不可能停止传播现场活动。同样，.delegate（）处理的事件也会传播他们被委派的要素;事件处理程序绑定 DOM树下面的任何元素都已经被执行了到调用委托事件处理程序时。这些处理程序，因此，可能会阻止委托的处理程序触发调用event.stopPropagation（）或返回false。

一个很好的资源：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 2

$(":checkbox").live("click", function(e) {
        e.stopPropagation();
  //Do some other, completely different, cool stuff
  //console.log($(this).parent().attr("id"));
  alert("test");
});

$("dd.class1.class2").live("click", function (e) {
    e.stopPropagation();
  //Do some cool stuff
    alert("test2");
});

http://jsfiddle.net/PsaHQ/4/

Answer 3

好的，你在这里遇到了一大堆小问题。

您的第一个选择器中有2个问题。查看下面的更新选择器（并注意大小写）：

$(".class1.checkBox").live("click", function() {
  //Do some other, completely different, cool stuff
  console.log("test");
  return false; //added.
});

如果要阻止事件冒泡到下一个jquery侦听器，只需返回false。

Answer 4

只需将click事件绑定到dd并正确检查目标代理

  $("dd.class1.class2").live("click", function (event) {
        if($(event.target).is(":checkbox"))
        {
            console.log("put checkbox func here");
        }else{
           console.log("put div func here");
        }
    });

工作示例： http://jsfiddle.net/QWLpd/1/

jQuery监听器不包括孩子

4 个答案: