事件冒泡详解及阻止事件冒泡

什么是事件冒泡？

事件冒泡：从子元素向父元素触发 —>当某个事件触发时，同样的事件会向父元素触发。
但并不是所有事件都会产生冒泡问题 onfocus、 onblur 、onload不会产生冒泡问题
以上文字看起来太官方，不容易理解，下面给大家来点通俗易懂的
举例来说明：
例如：
现在窗口上有一个按钮，给按钮绑定一个点击事件，点击安钮让其显示一个提示框。
给界面也绑定一个点击事件，点击其按钮外的任何位置让其提示框消失。
那么问题来了，按钮也属于界面里，点击安钮的话岂不是就冲突了。那么怎么来解决这个问题呢？

这类情况就被称为事件冒泡！

阻止事件冒泡

阻止事件冒泡要在哪阻止呢？
阻止事件冒泡就好比，一个人身体上的某一部位发生病变且有可能会蔓延到其他部位，我们就要在这个部位进行手术来阻止它的蔓延。

html代码：

 <input type="button" value="按钮" id="obut" onclick="but()"><div id="div1" style="display: none;width: 300px; height: 100px; border: 1px solid black;">提示框</div>

javascript代码：

 let obut = document.getElementById("obut");let div1 = document.getElementById("div1");function but(evt){let e = evt || event; //为了兼容大多数浏览器 这里采用事件的兼容写法div1.style.display = "block"; //点击安钮让其提示框显示e.stopPropagation?e.stopPropagation():e.cancelBubble=true;//阻止事件冒泡}document.onclick = function(){//给document绑定点击事假div1.style.display = "none";//点击界面的任何一个位置让提示框隐藏}

事件冒泡详解及阻止事件冒泡相关推荐

c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
oracle 冒泡,详解易语言的冒泡算法
我们做一些游戏脚本软件时候,经常要用到这个算法,比如求解离自己身边最近的怪物优先攻击,就要用到这个算法,冒泡算法可以快速的把一组数据按照从大到小,或者从小到大的顺序进行快速排序. 冒泡算法的核心就是, ...
CSharp(C#)语言_委托和事件区别详解
委托和事件区别详解委托和事件的概念委托事件委托和事件的作用委托事件委托和事件的区别委托和事件的详细解答请看C#系列文章委托和事件代码实践委托事件总结委托和事件的概念委托 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
Android事件流程详解
Android事件流程详解网络上有不少博客讲述了android的事件分发机制和处理流程机制,但是看过千遍,总还是觉得有些迷迷糊糊,因此特地抽出一天事件来亲测下,向像我一样的广大入门程序员详细讲述an ...
委托与事件代码详解与（Object sender,EventArgs e）详解
委托与事件代码详解 using System; using System.Collections.Generic; using System.Text; namespace @Delegate //自 ...
mysql binlog event_MySQL binlog中的事件类型详解
MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...
binlog事件类型详解
MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...

事件冒泡详解及阻止事件冒泡

什么是事件冒泡？

阻止事件冒泡

事件冒泡详解及阻止事件冒泡相关推荐

最新文章

热门文章