Question

如果有人在该div外面点击，我想关闭div。我有以下代码：

   $('body').click(function(e) {
        $('div.test').slideUp('slow');
    });
    $('div.test').live('click',function(e) {
        e.stopPropagation();
    });

但问题是当有人点击div时，div本身正在关闭。我想防止这种情况。调试后我发现一个奇怪的东西，调试器首先击中$（body）.click而不是$（div.test），我可以知道这个的原因吗？你能帮我解决这个问题吗？

Answer 1

问题在于您使用live。

live是一种说法“将处理程序绑定到根元素并捕获源自与选择器匹配的元素的任何事件”的方式。它是delegate的简短形式。这是可能的，因为“冒泡”：元素的事件也在元素的祖先上触发。

如果您未另行指定，live会将事件处理程序绑定到document。 body上的事件处理程序将首先被触发，因为事件不会冒泡到document处理程序，e.stopPropagation()所在的处理程序。

最简单的解决方案是将live更改为click：

$('div.test').click(function(e) {

如果您需要使用live，请引入容器元素，并在那里处理事件。我会使用delegate，因为我更喜欢它的语法，但如果您愿意，可以使用live：

$('#container').delegate('div.test', 'click', function(e) {
    e.stopPropagation();
});

事件在#container处理，传播停止，因此事件永远不会到达body的事件处理程序。

Answer 2

如果您使用live()处理正文，会发生什么？

我认为实时点击处理程序不会以与标准点击相同的方式传播事件。请参阅this documentation。

Answer 3

我认为问题出现是因为您将点击处理程序设置为<body>

我使用<p>而不是<body>尝试了相同的操作，似乎工作正常。

这是一个相关的小提琴：
http://jsfiddle.net/seNXV/7/

Answer 4

live()不会阻止传播。在jQuery文档中说。

您需要使用delegate()

4 个答案: