Javascript/jquery單個事件目標代理

Question

我意識到event.target冗餘可能會在未來綁定另一個事件時導致很多問題。

例如，當我在另一個Div元素。

<div id='div1'> 
    <div id='div2> 
    </div> 
</div> 

我使用下面的Jquery代碼來綁定一個事件。

$('div').bind('click', function(event){ 
    alert(event.target.id) 
} 

有兩個警報框而不是一個。 我明白爲什麼是因爲有2個div我點擊的概念。

當然，更深層次的問題是，當我試圖在事件發生後將事件綁定到event.target時，它會綁定x2等等。

是否有可能擺脫外部div上的事件綁定，只捕獲內部。

在此先感謝。

Answer 1

可以防止事件from bubbling使用event.stopPropgation()這樣的：

$('div').bind('click', function(event){ 
    alert(event.target.id); 
    event.stopPropagation(); 
}); 

You can give it a try here。這會在獲得它的第一個<div>上「陷阱」click，並且不會讓它傳播給任何父母。

Answer 2

我想你只需要在你的綁定調用選擇裏面的div：

$('div:eq(0)').bind('click', function(event){ 
    alert(event.target.id) 
}