防止嵌套元素從觸發事件爲父元素

.parent (has if/else to toggle on click) -> .child (has nothing)

<div class="parent">Parent 
    <div class="child">Child</div> 
</div>

父元素是風格來隱藏溢出的內容和切換上點擊其高度。當用戶點擊時，父元素將展開以顯示子元素。我希望用戶能夠在沒有父元素切換回原始大小並隱藏子元素的情況下單擊子元素。我想切換隻發生在父母身上。

我意識到子元素仍然包含在父元素的可點擊區域內，但有沒有辦法排除它？

來源

2013-08-23 Narong

停止傳播！ – adeneo

@ adeneo謝謝！ – Narong

解決方法1：用currentTarget當前比較目標：

$("#parentEle").click(function(e) { 
    if(e.target == e.currentTarget) { 
     alert('parent ele clicked'); 
    } else { 
     //you could exclude this else block to have it do nothing within this listener 
     alert('child ele clicked'); 
    } 
});

Fiddle

e.target將啓動該事件的元素。
e.currentTarget將會是它現在的位置（冒泡），在這個點擊事件中將會是parentEle，因爲這就是它正在監聽的內容。

如果它們相同，則您知道點擊是直接在父級上的。

解決方案2：停止傳播事件擊中parentEle前：

另一種選擇是，以防止事件在第一時間冒泡，如果有一個子元素上的點擊。這是可以做到這樣的：

$("#parentEle").click(function(e) { 
    alert('parent ele clicked'); 
}); 
$("#parentEle").children().click(function(e) { 
    //this prevent the event from bubbling to any event higher than the direct children 
    e.stopPropagation(); 
});

Fiddle

兩者之間的主要區別在於，第一個解決方案會忽略這個偵聽器的事件，並允許它繼續向上冒泡。如果您有需要獲得該活動的此parentEle的家長，這可能是必需的。

第二種解決方案阻止任何點擊事件冒泡過去parentEle的直接子女。因此，如果在parentEle的父級上發生了點擊事件，他們也不會看到這些事件。

來源

2013-08-23 18:35:25 smerny

+1但明智的，我建議你改變'.find（'*'）'爲'.children（）'。 –

@ Karl-AndréGagnon正如我想的那樣，我們不需要關心下面的冒泡。 – smerny

工程很棒。停止傳播。 – Narong

使用event.stopPropagation();：

$('#a').add('#b').click(fun1); 

function handler(event) { 
    event.stopPropagation(); 
    // now do your stuff   
}

來源

2013-08-23 18:42:51 Farhan

防止嵌套元素從觸發事件爲父元素

回答

相關問題