簡體   English   中英

停止點擊傳播給父母

[英]Stop click from propagating to a parent

單擊特定元素時,我想調用一個函數。 當任何兒童被點擊,我不想調用的函數。

沒有使用jQuery。

例:

我創建了一個模式:

<div class="fullscreen-overlay">
  <div class="card">
    ...
  </div>
</div>

我想在單擊“ .fullscreen-overlay”時調用我的closeModal()函數,但是在單擊“ .card”或其任何內容時不調用它。

jsfiddle:

https://jsfiddle.net/5kuwmf9s/

研究:

我本可以為此宣誓有一個CSS屬性,但是在谷歌搜索並在SO上搜索它之后,我找不到它/可能一直在想像它。 “指針事件”將其停止在目標元素上,而不是冒泡。

還有另一個答案建議將事件處理程序附加到所有捕獲其事件並停止傳播的子級,這似乎是不必要的。 我的孩子們是充滿活力的,要保持附加處理程序會變得很復雜。

您可能已經比較了事件的targetcurrentTarget

僅當當前元素是事件的原始來源時,它們才相等:

function handleClick(e){
  if (e.target === e.currentTarget) {
    alert('clicked!');
  }
}

參考文獻:

JSFiddle: https ://jsfiddle.net/u78k4k6t/

  • 嘗試使用一個元素並將其設置為'.fullscreen-overlay'並將其綁定到該元素
  • 如答案鏈接所示
  • 使用event.target或event.srcElement

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM