掌握事件冒泡

假设我们有一个HTML的结构是这样掌握事件冒泡

<div id="container"> 
    <div id="nested"> 
     <span id="someElement"></span> 
    </div> 
</div>

...，我们的目标是对#container仅事件侦听器！所以，我们绑定监听器（jQuery代码）

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
});

当然这样的作品，但我的这种方法的问题是，由于事件通常冒泡，那听众也会如果我们实际点击#nested或#someElement火。我目前的解决方案仅处理click当#container点击与event.target

$("#container").on('click', function(event) { 
    if(this === event.target) { 
     alert("container was clicked"); 
    } 
});

我的问题比较this：这算是“最佳实践”？有没有更好的方式与jQuery完成相同的结果“开箱即用”？

例子在行动：http://jsfiddle.net/FKX7p/

来源

2012-09-17 Andre Meinhold

IMO，这是最好的做法。 – VisioN

@jSang：实际上，内部元素在点击时没有任何听众。这是否被认为是最佳做法？绑定每个元素只是为了阻止传播？ –

我也没有看到任何更好的方法，事实上，我打算将其作为答案发布，直到我看到您已经拥有该代码。 –

替代解决方案：

$("#container").click(function(){ 
    alert("container was clicked"); 
}).children().click(function(e) { 
    return false; 
});

但您的解决方案更好。 jsfiddle.net/FKX7p/2/（与返回false）OR jsfiddle.net/FKX7p/3/（使用stopPropagation）

我更喜欢使用回在你的例子（代码变得更容易阅读）：

if(this !== event.target) return;

来源

2012-09-17 12:40:57 webdeveloper

另外，当需要时，使用'event.CurrentTarget！== event.Target'而不是'this'，这是由于使用jQuery.proxy时'this'的可能的上下文更改：http://api.jquery.com/jQuery .proxy/ – Nope

另一种解决方案更糟，因为它增加了很多事件处理程序。 – naugtur

@naugtur我同意你的看法，但是在'on'功能之前，这个解决方案很受欢迎。 – webdeveloper

我不知道哪一个作品的速度更快，但它使某种意义上说，下面的代码会更好：

$("#container").click(function (e) { 
    if (e.target.id && e.target.id !== "container") return false; 
});

来源

2012-09-20 13:55:33

现在我只检查标识符，复杂的选择器我看不到另一种方式，除了比较对象 –

的另一种方式，以防止冒泡事件是使用event.stopPropagation（）;

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
}) 
.children().on('click', function(event) { 
    event.stopPropagation(); 
});

我认为使用这种方法的好处是，如果你想将另一个事件的div嵌套，你可以只使用

$("#nested").on('click', function(event) { 
    event.stopPropagation(); 
    // some action 
}); 

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
});

来源

2012-09-21 01:16:30

掌握事件冒泡

回答

相关问题