給出如下所示的html/css/javascript/jquery，當點擊'#bbb'時事件仍然會觸發。在Javascript/DOM中排除元素
有沒有辦法避免這種情況發生？
<div id="aaa" style="position:absolute; width:100%; height:100%; background-color:#f00;">
<div id="bbb" style="height:25%; width:25%; background-color:#0f0; margin:0 auto;">
</div>
</div>
<script type="text/javascript">
$('#aaa').click(function(){alert('aaa clicked');});
</script>
在這裏你去：
$('#aaa').click(function (e) {
if (e.target !== this) { return; }
alert('aaa clicked');
});
e.target點，在其click事件被解僱的DOM元素。 this指向#aaa元素（因爲它是他的點擊處理程序）。因此，這條線
if (e.target !== this) { return; }
將提前終止click處理程序，如果#aaa元素並沒有直接點擊。
您想取消事件冒泡（事件傳播）
http://www.quirksmode.org/js/events_order.html
$('#aaa').click(function(){alert('aaa clicked');});
$('#bbb').click(function(event){alert('bbb clicked'); event.stopPropagation();});
從我的理解爲BBB ELE換貨嵌套在AAA元素，你可能會來處理BBB元素點擊事件也是如此。
$('#aaa').click(function(event){event.stopPropagation(); alert('aaa clicked');});
$('#bbb').click(function(event){event.stopPropagation(); alert('bbb clicked');});
但是不要忘記考慮停止事件傳播或者兩個事件監聽器都會收到通知。
你可以看到source code in action here
希望這有助於。
e.target太棒了！ – maxp
@maxp請注意，您必須明確列出事件對象作爲點擊處理程序的第一個參數。 –
我的建議呢？ – mplungjan