Stopping Event Propagation 的危害

awokezhou 發(fā)布于2019-08-19 18:47 / 1263人閱讀

摘要：如何實(shí)現(xiàn)檢測(cè)點(diǎn)擊區(qū)域是否在某個(gè)元素以外很多人都會(huì)像排名第一的答案那樣做，如下這卻會(huì)導(dǎo)致一個(gè)問題點(diǎn)擊事件停止冒泡了，可能會(huì)使得其他程序無法知道事件的發(fā)生。

如何實(shí)現(xiàn)檢測(cè)點(diǎn)擊區(qū)域是否在某個(gè)元素以外？
很多人都會(huì)像排名第一的答案那樣做，如下：

$(window).click(function() {
//Hide the menus if visible
});

$("#menucontainer").click(function(event){
    event.stopPropagation();
});

這卻會(huì)導(dǎo)致一個(gè)問題：點(diǎn)擊事件停止冒泡了，可能會(huì)使得其他程序無法知道事件的發(fā)生。

那么如何做能解決這個(gè)問題呢，答案如下：

$(document).on("click", function(event) {
  if (!$(event.target).closest("#menucontainer").length) {
    // Hide the menus.
  }
});

document 監(jiān)聽了點(diǎn)擊事件，判斷 event target 是否是 #menucontainer 或父元素是 #menucontainer，如果不是，那你就可以知道點(diǎn)擊區(qū)域在 #menucontainer 之外。

來源： The Dangers of Stopping Event Propagation

云服務(wù)器 GPU云服務(wù)器蠕蟲病毒的危害系統(tǒng)漏洞的危害人工智能的危害 nlp課程的危害

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80004.html

相關(guān)文章

DOM 事件詳解

摘要：與此同時(shí)，我們獲得了回調(diào)函數(shù)的句柄，從而可以隨時(shí)從元素上移除相應(yīng)的事件監(jiān)聽。對(duì)象會(huì)被作為第一個(gè)參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。 Click、touch、load、drag、change、input、error、risize — 這些都是冗長(zhǎng)的DOM（文檔對(duì)象模型）事件列表的一部分。事件可以在文檔(Document)結(jié)構(gòu)的任何部分被觸發(fā)，觸發(fā)者可以是用戶操作，也可以是瀏覽器本身。事件并不是...

tianhang 2019-08-19 14:24 評(píng)論0 收藏0
對(duì)javascript事件的深度理解

摘要：事件流事件流是描述對(duì)頁(yè)面接受事件的順序，和提出了完全相反的事件流模型，描述的是從頁(yè)面中接收事件的順序也可理解為事件在頁(yè)面中傳播的順序。事件流事件流是描述對(duì)頁(yè)面接受事件的順序，IE和Netscape提出了完全相反的事件流模型，描述的是從頁(yè)面中接收事件的順序,也可理解為事件在頁(yè)面中傳播的順序。我們通過平常使用知道addEventListener最后的參數(shù)是切換句柄的，當(dāng)這個(gè)布爾值為...

zxhaaa 2019-08-20 18:35 評(píng)論0 收藏0
Java面試 32個(gè)核心必考點(diǎn)完全解析

摘要：如問到是否使用某框架，實(shí)際是是問該框架的使用場(chǎng)景，有什么特點(diǎn)，和同類可框架對(duì)比一系列的問題。這兩個(gè)方向的區(qū)分點(diǎn)在于工作方向的側(cè)重點(diǎn)不同。 [TOC] 這是一份來自嗶哩嗶哩的Java面試Java面試 32個(gè)核心必考點(diǎn)完全解析（完）課程預(yù)習(xí) 1.1 課程內(nèi)容分為三個(gè)模塊基礎(chǔ)模塊：技術(shù)崗位與面試計(jì)算機(jī)基礎(chǔ) JVM原理多線程設(shè)計(jì)模式數(shù)據(jù)結(jié)構(gòu)與算法應(yīng)用模塊：常用工具集 ...

JiaXinYi 2019-08-16 16:53 評(píng)論0 收藏0
DOM事件機(jī)制

摘要：而事件分為個(gè)級(jí)別級(jí)事件處理，級(jí)事件處理和級(jí)事件處理。一個(gè)事件發(fā)生后，會(huì)在子元素和父元素之間傳播。也就是說，始終是監(jiān)聽事件者，而是事件的真正發(fā)出者。五參考文章級(jí)別與事件事件機(jī)制解惑事件模型事件委托詳解事件的學(xué)與記和和的區(qū)別前言本文主要介紹DOM事件級(jí)別、DOM事件模型、事件流、事件代理和Event對(duì)象常見的應(yīng)用，希望對(duì)你們有些幫助和啟發(fā)！本文首發(fā)地址為GitHub博客,寫文章不易，...

laznrbfe 2019-08-23 13:53 評(píng)論0 收藏0
DOM事件機(jī)制

摘要：而事件分為個(gè)級(jí)別級(jí)事件處理，級(jí)事件處理和級(jí)事件處理。一個(gè)事件發(fā)生后，會(huì)在子元素和父元素之間傳播。也就是說，始終是監(jiān)聽事件者，而是事件的真正發(fā)出者。五參考文章級(jí)別與事件事件機(jī)制解惑事件模型事件委托詳解事件的學(xué)與記和和的區(qū)別前言本文主要介紹DOM事件級(jí)別、DOM事件模型、事件流、事件代理和Event對(duì)象常見的應(yīng)用，希望對(duì)你們有些幫助和啟發(fā)！本文首發(fā)地址為GitHub博客,寫文章不易，...

cooxer 2019-08-02 12:10 評(píng)論0 收藏0