阻止事件冒泡

事件冒泡

由 只愿长相守 提交于 2020-03-31 08:02:40
1. 什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序；如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 2. 事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 3. 阻止事件冒泡 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 4. 阻止右键菜单 可以在网页上阻止按鼠标右键弹出的默认菜单，然后可以自定义菜单 $(document).contextmenu(function(event) { event.preventDefault(); }); 5. 合并阻止事件冒泡和右键菜单 实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，如下 // event.stopPropagation(); // event.preventDefault(); // 合并写法： return false; 例子1，验证事件冒泡，搞个三层结构div,并分别定义样式

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

由 落花浮王杯 提交于 2020-03-21 05:22:27
preventDefault： preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。 当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。 我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转： //假定有链接 <a href="http://www.cnf2e.com/" id="testA" >cnf2e</a> var a = document.getElementById("testA"); a.onclick =function(event){//阻止默认行为 event.preventDefault(); } stopPropagation： stopPropagation也是事件对象(Event)的一个方法， 作用是阻止目标元素的冒泡事件，但是会不阻止默认行为 。什么是冒泡事件？如 在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发

点击事件执行两次的解决办法

由 北城以北 提交于 2020-03-03 15:34:40
出现点击事件执行两次的原因就是事件冒泡，根据需求这里给出两种解决方法： 1. return false 2. event.stopPropagation() 两种方法是有区别的： event.stopPropagation()会阻止事件往上冒泡，但并不阻止事件本身； return false 则是既阻止了事件往上冒泡又阻止了事件本身。 来源： CSDN 作者： qq_43386335 链接： https://blog.csdn.net/qq_43386335/article/details/104630555

js中事件冒泡的理解与分析

由 放肆的年华 提交于 2020-02-11 19:32:07
一. 事件 事件的三个阶段：事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象； 目标阶段：到达目标事件位置（事发地），触发事件； 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象 事件捕获 ：事件发生时首先发生在document上，然后依次传递给body，最后到达目的节点（即事件目标)， 事件流模型：div →body→ html→ document 。 事件冒泡 ：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反。 onclick 事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题 addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖。事件类型没有on，第三个参数false，表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。如果绑定同一个事件同一个方法，只会执行一次，所以如果handle是同一个方法，只执行一次。 attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段，可以多次进行绑定，所以如果handle是同一个方法，绑定几次执行几次

js阻止事件冒泡

由 若如初见. 提交于 2020-02-10 09:02:27
<body>　　<form id="form1" runat="server">　　　　<div id="divOne" onclick="alert('我是最外层');">　　　　　　<div id="divTwo" onclick="alert('我是中间层！')">　　　　　　　　<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>　　　　　　</div>　　　　</div>　　</form></body> 比如上面这个页面， 分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。 运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 ---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。 如何来阻止? 1.event.stopPropagation(); <script type="text

JS阻止事件冒泡的3种方法之间的不同

由 你。 提交于 2020-02-07 09:50:13
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 如何来阻止Jquery事件冒泡？ 通过一个小例子来解释 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Porschev---Jquery 事件冒泡</title><script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

JavaScript-事件冒泡&Event和this的区别

由 青春壹個敷衍的年華 提交于 2020-01-31 22:21:55
在事件冒泡中 ，this永远指的是当前事件的对象 window.event.srcElement当用在冒泡事件的时候，它永远指的是最初触发此事件的对象 onload = function ( ) { document . getElementById ( "bodyid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "divid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "pid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "spanid" ) . onclick = function ( ) { //如何阻止冒泡事件的进行 window . event . cancelBubble = true ; //不再进行触发其父级事件 } ; //----------补充扩展：

JQuery中阻止事件冒泡方式及其区别

由 别等时光非礼了梦想. 提交于 2020-01-12 03:33:26
本文转载自： https://www.cnblogs.com/dingjing0518/p/6839593.html 作者：dingjing0518 转载请注明该声明。 方式一：event.stopPropagation(); 1 $("#div1").mousedown( function (event){ 2 event.stopPropagation(); 3 }); 方式二：return false; 1 $("#div1").mousedown( function (event){ 2 　　 return false ; 3 }); 但是这两种方式是有区别的。return false 不仅阻止了 事件 往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 来源： CSDN 作者： kkwant 链接： https://blog.csdn.net/kkwant/article/details/103788410

react阻止事件冒泡

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

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

由 只谈情不闲聊 提交于 2019-12-09 07:40:51
阻止事件冒泡 < 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 ); } }
订阅 阻止事件冒泡