Stopping Event Propagation 的危害

awokezhou 发布于2019-08-19 18:47 / 1092人阅读

摘要：如何实现检测点击区域是否在某个元素以外很多人都会像排名第一的答案那样做，如下这却会导致一个问题点击事件停止冒泡了，可能会使得其他程序无法知道事件的发生。

如何实现检测点击区域是否在某个元素以外？
很多人都会像排名第一的答案那样做，如下：

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

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

这却会导致一个问题：点击事件停止冒泡了，可能会使得其他程序无法知道事件的发生。

那么如何做能解决这个问题呢，答案如下：

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

document 监听了点击事件，判断 event target 是否是 #menucontainer 或父元素是 #menucontainer，如果不是，那你就可以知道点击区域在 #menucontainer 之外。

来源： The Dangers of Stopping Event Propagation

海外云主机云服务器蠕虫病毒的危害系统漏洞的危害人工智能的危害 nlp课程的危害

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80004.html

DOM 事件详解

摘要：与此同时，我们获得了回调函数的句柄，从而可以随时从元素上移除相应的事件监听。对象会被作为第一个参数传递给事件监听的回调函数。 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是...

tianhang 2019-08-19 14:24 评论0 收藏0
对javascript事件的深度理解

摘要：事件流事件流是描述对页面接受事件的顺序，和提出了完全相反的事件流模型，描述的是从页面中接收事件的顺序也可理解为事件在页面中传播的顺序。事件流事件流是描述对页面接受事件的顺序，IE和Netscape提出了完全相反的事件流模型，描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。我们通过平常使用知道addEventListener最后的参数是切换句柄的，当这个布尔值为...

zxhaaa 2019-08-20 18:35 评论0 收藏0
Java面试 32个核心必考点完全解析

摘要：如问到是否使用某框架，实际是是问该框架的使用场景，有什么特点，和同类可框架对比一系列的问题。这两个方向的区分点在于工作方向的侧重点不同。 [TOC] 这是一份来自哔哩哔哩的Java面试Java面试 32个核心必考点完全解析（完）课程预习 1.1 课程内容分为三个模块基础模块：技术岗位与面试计算机基础 JVM原理多线程设计模式数据结构与算法应用模块：常用工具集 ...

JiaXinYi 2019-08-16 16:53 评论0 收藏0
DOM事件机制

摘要：而事件分为个级别级事件处理，级事件处理和级事件处理。一个事件发生后，会在子元素和父元素之间传播。也就是说，始终是监听事件者，而是事件的真正发出者。五参考文章级别与事件事件机制解惑事件模型事件委托详解事件的学与记和和的区别前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，...

laznrbfe 2019-08-23 13:53 评论0 收藏0
DOM事件机制

摘要：而事件分为个级别级事件处理，级事件处理和级事件处理。一个事件发生后，会在子元素和父元素之间传播。也就是说，始终是监听事件者，而是事件的真正发出者。五参考文章级别与事件事件机制解惑事件模型事件委托详解事件的学与记和和的区别前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，...

cooxer 2019-08-02 12:10 评论0 收藏0