兩個點擊事件,大的p包含小的p,點擊小的p,大的也會觸發,怎麼處理?
如圖描述,現在點擊小p裡面的click,大的p也觸發,現在只想點擊小的p只觸發小的click事件,怎麼處理?
現在
给我你的怀抱2017-05-27 17:46:35
在一個物件上觸發某一類事件(例如點擊onclick
事件),如果此物件定義了此事件的處理程序,那麼此事件就會呼叫這個處理程序,如果沒有定義此事件處理程序或事件返回true
,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直到它被處理(父級物件所有同類事件都將被啟動),或者它到達了物件層次的最頂層,即document
物件(有些瀏覽器是window
),稱為事件冒泡。
//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
迷茫2017-05-27 17:46:35
是JS的冒泡(捕獲)事件
類似這樣的解決方法蠻簡單的
$('.p1').on('click', function(event) {
event.preventDefault();
if ($(event.target).is('.p2')) {
alert('click 2')
}else{
alert('click 1')
}
});
为情所困2017-05-27 17:46:35
看完這兩篇文章不懂來找我:
http://javascript.info/bubbli...
https://stackoverflow.com/que...
阿神2017-05-27 17:46:35
我想到有兩種解決方法:
1.阻止事件冒泡。
事件冒泡是從裡面的子元素逐級執行到外面的父元素,當執行子元素的點擊事件的時候,需要調用冒泡阻止事件,這樣事件就不能傳遞到上層,去執行上層的事件。
2.根據引起點擊的元素不同來執行不同的事件。
當點擊的元素是子元素引起的,執行A事件,如果不是子元素,則執行B事件。