掌握事件冒泡

假設我們有一個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

掌握事件冒泡

回答

相關問題