Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图，当我们点击页面某个元素时，会产生点击事件...，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。...正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话） ?...结论 综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。...常见的屏蔽右键默认菜单 .passive 每次事件产生，浏览器都会去查询一下是否调用了preventDefault阻止该次事件的默认动作,为事件设置.passive修饰符就是为了告诉浏览器，不用查询了，
在uniapp项目中，经常会遇到父元素有一个点击事件，其子元素也有一个点击事件，但我们只想触发子元素事件，可是父元素也跟着触发了。...我们这时需要给子元素加上阻止事件冒泡就行了 //子元素方法 ...@click.stop 就是阻止事件冒泡的写法 未经允许不得转载：肥猫博客 » uniapp阻止事件冒泡
阻止冒泡 <script src="script...function (e) { alert("我是div"); }) //e.stopPropagation();就是阻止冒泡...因为已经被阻止了。...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。...： 1.一个事件起泡对应触发的是上层的同一事件 单击two的时候就会起泡触发one单击的事件。
事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现...DOCTYPE html> JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble...阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue = false
类似弹窗遮罩的实现方式，我们通常会在容器元素上绑定一个点击事件，然后设置里面的子元素的点击事件阻止冒泡即可。...'#main>div'); oDiv.onclick = function() { //body ... } 二、解决方案探索 按照上面的分析，接下来我们只需要对扇形的点击事件做阻止冒泡就好了...相当于是要阻止饼图点击事件的冒泡。...关联文章： Echarts柱状图点击事件（阻止冒泡） 采用myChart.off('click')。网路上输入echarts 阻止冒泡，出来很多这个解决方案的文章。...echarts鼠标事件阻止冒泡 采用param.event.event.stopPropagation()。这也是我一开始要采用的阻止冒泡方法，最初也是不知道怎么获取window.event。
简单说下事件委托与阻止冒泡 html: <li class="active_sort_opts" data-id...$("ul[data-type='cityPick']").on('click','li',function(){ alert("子元素li被点击"); }); 当点击具体的li元素时，发现ul的事件也被触发了...("父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//阻止冒泡...alert("子元素li被点击"); }); 加一句阻止冒泡即可。
事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <!...： return false; 好，下面将阻止事件冒泡的方法写成return false;来看看。
1.停止事件冒泡 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation...()方法 e.stopPropagation(); } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble...= true; return false; } 2.阻止事件默认行为。...//如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault...(); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false;
//阻止冒泡的兼容性写法 function stopBubble(event){ var e=arguments.callee.caller.arguments[0]||event; if...e.stopPropagation() }else if(window.event){ window.event.cancelBubble=true; } } //阻止浏览器默认行为的兼容性写法...function stopDefault(event){ var e=arguments.callee.caller.arguments[0]||event; //阻止默认浏览器动作(...W3C) if(e&&e.preventDefault){ e.preventDefault(); }else{ //IE中阻止函数默认动作的方式
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...} else { e.cancelBubble = true; //IE阻止冒泡方法 } } 在child（区域①）...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
“ 微信小程序怎么阻止事件冒泡呢”01微信小程序阻止事件冒泡将子类的点击事件bindtap改为用catchtap 点击 02uniapp阻止事件冒泡将子类的点击事件@click写成@click.stop利用vue的事件修饰符stop
as3.0中的事件冒泡机制有时候会很烦人，比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后，如果两个Sprite都注册了Mouse_Down...事件，要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件，默认是不行的，因为事件冒泡会让Container也响应Mouse_Down事件，示例代码： package { import...} } 鼠标点击最小的矩形后，输出如下： _sub_child.MOUSE_DOWN _child.MOUSE_DOWN _container.MOUSE_DOWN 相当于点一个，触发了三个，要想阻止事件冒泡...stopPropagation():void 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。...，stopPropagation将把该事件注册的所有监听处理函数执行完后，再阻止该事件继续向上冒泡；而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡
'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡
解决#btn的事件冒泡，使用return false; ? 在阻止了#btn按钮的click()事件冒泡到$(document)之后，那么弹框就可以正常显示了。...阻止.pop弹框的click()事件，直接return false，就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件 ?...这个思路不涉及事件冒泡的阻止，但是属于同一个click()方法的阻止，因为点击$(document)的click()事件应该不会冒泡到它下面的元素.pop，不过可以在这里验证一下。...在这个验证的过程中，更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。...写到这里基本已经演示完了关于事件冒泡的弹框示例了。 完整代码 <!
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation
2.解决思路: 比如可以把button换掉；阻止keydown事件的默认行为preventDefault等。...3.举例说明: 1.阻止浏览器的默认行为 function stopDefault(e) { if(e && e.preventDefault) { //如果提供了事件对象，则这是一个非IE...浏览器 e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式 ...window.event.returnValue = false; } return false; } 2.停止事件冒泡 function stopBubble...的stopPropagation()方法 } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;
因为按钮在文档内，所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下： 消失的盒子 //点span显示盒子 $("span").click( function(){ event.stopPropagation()//阻止事件冒泡
JavaScript冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。...防止冒泡和捕获 w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，用是阻止目标元素的冒泡事件...什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。 stopPropagation就是阻止目标元素的事件冒泡到父级元素。...阻止冒泡 window.event?...，而是用jQuery的话则既阻止默认行为又防止对象冒泡。
冒泡事件和捕获事件 冒泡事件是，进行 捕获事件是从外向内，从大到小 冒泡事件bindtap one <view...测试 点击 three区域，事件会从外到到，从大到小进行传递,Console`控制台显示 非冒泡事件和捕获阻止事件 非冒泡事件catchtap <view id="one" class="one" bindtap...测试 点击 three区域，事件从内到外传递被阻止,Console控制台显示 捕获阻止事件capture-catch:tap <view id="one" class="one" capture-catch...测试 点击 three区域，事件从外到内传递被阻止,Console控制台显示 互斥事件(mut-bind:tap) one...测试 点击 three区域，互斥事件绑定 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation(...)方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; return false...; 阻止浏览器的默认行为 JavaScript代码 //编辑文章时阻止a标签跳转 $("#final_content").find("a").click...(function(e){ //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.preventDefault
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
