阻止冒泡 | 易学教程

js 事件冒泡

阅读更多关于 js 事件冒泡

一. 什么是事件的冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个程序，如果没有定义此事件处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播，从里到外，直到它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些对象是window）。二.如何阻止冒泡：例子： <body> <form> <div onclick="alert('我是最外层');"> <div onclick="alert('我是中间层！');"> <a href="#" onclick="alert('我是最里层！');">点击我</a> </div> </div> </form> </body> 比如上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr_three---->divTwo---->divOne。从最里层冒泡到最外层

js 事件流（2）

阅读更多关于 js 事件流（2）

一、概述事件流：事件流描述的是从页面中接收事件的顺序。 DOM事件流传播的三个过程：事件捕获阶段 ——》处于目标阶段 ——》事件冒泡阶段。事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反事件流示意支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。二、示例假设一个元素div，它有一个下级元素p。 <div οnclick="alert(1)"> <p οnclick="alert(2)">元素</p> </div> 这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？事件捕获当你使用事件捕获时，父级元素先触发

js事件冒泡机制简述

阅读更多关于 js事件冒泡机制简述

定义:JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。我的目的很简单,做一个类型window桌面的web页面.当单击开始菜单时弹出一个层,当单击桌面其他地方时隐藏开始菜单.以前对js的冒泡机制有点了解,知道window.event.cancelBubble 来设置是否启用事件传播.但是这只能在IE是使用.如果跨浏览器就不太合适了.Jquery中的event.stopPropagation()解决了浏览器的兼容性.以下举例说明: <!DOCTYPE html> <head> <title>jQuery - Start Animation</title> <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> <script type=

react阻止事件冒泡

阅读更多关于 react阻止事件冒泡

React阻止冒泡事件的方法，主要分为如下两种情况： 1、阻止合成事件间的冒泡，方法： e.stopPropagation(); 事件绑定如下：阻止事件冒泡的写法如下： 2、阻止合成事件与最外层document上的事件间的冒泡，方法： e.nativeEvent.stopImmediatePropagation(); 事件绑定写法：（1）不传参数：（2）传参数：阻止事件冒泡的写法：这样写的原因，是给document添加了点击事件，如下图：来源： CSDN 作者：蒲厷渶之戀链接： https://blog.csdn.net/lvkelly/article/details/79876703

事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为

阅读更多关于事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为

要了解事件委托，首先要了解事件流的概念和事件执行流程： DOM2级中同时支持两种事件模型：捕获型事件和冒泡型事件，并且每当某一事件发生时，都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获) ；事件的捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。当事件触发时body会先得到有事件发生的信息，然后依次往下传递，直到到达最详细的元素，这就是事件捕获阶段。还记得事件注册方法ele.addEventListener(type,handler,flag)吧，Flag是一个Boolean值，true表示事件捕捉阶段执行，false表示事件冒泡阶段执行，默认为false。接着就是事件冒泡阶段。从下往上依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。，在这个过程中，可以阻止事件的冒泡，即停止向上的传递。想一个例子：你一定有过经历，给一个ul的所有li添加点击事件，然后用了一个循环，给每个li都添加了onclick监听事件，这是很危险的做法，理论上，如果li足够多，就足以造成点击某个li的一瞬间浏览器崩溃。所以这时候就要用到事件捕获，将点击事件绑定在li的父元素中，当点击事件发生时，父元素会在其子元素中层层查找一直到达触发事件那个最详细元素的位置（即触发事件的最内层元素），下面是一个例子，大家可以参考一下： <!DOCTYPE

vuejs-阻止事件冒泡与默认行为

阅读更多关于 vuejs-阻止事件冒泡与默认行为

阻止事件冒泡 < div id = "box" > < div @ click = "show2()" > < input type = "button" value = "按钮" @ click = "show()" > </ div > </ div > new Vue({ el: "#box" , data: {}, methods: { show: function () { alert( 1 ); }, show2: function () { alert( 2 ); } } }); 在上面的代码中，input元素绑定了一个click事件，点击它将调用show()方法同时其父节点也绑定了一个click事件，点击它将调用show2()方法此时如果点击input按钮，将引发事件冒泡，show()和show2()方法会被依次调用若要阻止事件冒泡，只需将input标签中的 @click 改成 @click.stop 即可阻止默认行为 < div id = "box" > < input type = "button" value = "按钮" @ contextmenu = "show()" > </ div > new Vue({ el: "#box" , data: {}, methods: { show: function () { alert( 1 ); } }

jQuery中的事件冒泡捕获阻止冒泡

阅读更多关于 jQuery中的事件冒泡捕获阻止冒泡

jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡，就是又最开始的时间接收到逐级向上传播较为不具体的节点。IE9、谷歌浏览器、Safari、Opera等等都是将事件一直冒泡到windwo对象上。事件捕获事件捕获从最根本上的Document到下级的元素逐级的向下传递捕获。 IE9、谷歌浏览器、Safari、Opera等阻止事件冒泡 jQuery 提供了两种方式来阻止事件冒泡。 **方式一: **event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); **方式二：**return false; $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。来源： CSDN 作者：编程者联盟链接： https://blog.csdn.net/limm33/article/details/70340178

JavaScript事件捕获与事件冒泡

阅读更多关于 JavaScript事件捕获与事件冒泡

冒泡机制气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制在不同浏览器中，冒泡的程度不同： IE 6.0: div -> body -> html -> document 其他浏览器: div -> body -> html -> document -> window 注意：并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload 当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。冒泡事件，如下代码： HTML < div id = "father" > < button id = "btn" > 点击 </ button > </ div > CSS father { width : 300 px ; height : 300 px ; background-color : red ; margin : auto ; } JS window.onload = function () { var father = document.getElementById( "father"

【vue】阻止默认事件发生

阅读更多关于【vue】阻止默认事件发生

1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件仍然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false ；这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault() 来源： CSDN 作者： evan_qb 链接： https://blog.csdn.net/Evan_QB/article/details/80243589

Vue如何阻止事件冒泡

阅读更多关于 Vue如何阻止事件冒泡

如何解决 vue里面的冒泡事件方案如下：  < a v-on:click.stop = "doThis" ></ a >  < form v-on:submit.prevent = "onSubmit" ></ form >  < a v-on:click.stop.prevent = "doThat" >  < form v-on:submit.prevent></ form > 来源： CSDN 作者：麻球科技-菅双鹏链接： https://blog.csdn.net/qq_30632003/article/details/59572084

订阅阻止冒泡