js mouseup和mousedown 阻止冒泡事件-解决方法

主要看id为c4，

核心思路：比如当前你要点击一个a标签跳转到别的地方，鼠标按下去后（还没松开），突然不想点了，然后把鼠标移到别处去，然后，a标签是不会被触发的，这里用的就是这个思路。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style type="text/css">body{width:1000px; height:800px;color:#000;}#c1{ width:600px; height:600px; background:pink;}#c2{ position:relative; width:400px; height:400px; background:red; overflow:hidden;}#c3{ width:200px; height:200px; background:blue;}#c4{display:none;position:absolute;top:0;left:0;z-index: 999;width:600px; height:600px;opacity:0.2;background:blue;border:1px solid yellow;}</style></head><body><div id="c4">4</div><div id="c1">1<div id="c2">2<div id="c3">3</div></div></div><script type="text/javascript">var oBox1 = document.getElementById('c1');var oBox2 = document.getElementById('c2');var oBox3 = document.getElementById('c3');var oBox4 = document.getElementById('c4');var flag = true;oBox1.addEventListener('click',function(e){console.log(1);},flag);oBox2.addEventListener('click',function(e){console.log(2);},flag);oBox3.addEventListener('mousedown',function(e){e.stopPropagation();console.log('3-mosuedown');oBox4.style.display = 'block';},flag);oBox4.addEventListener('mouseup',function(e){e.stopPropagation();console.log('oBox4');oBox4.style.display = 'none';},flag);</script></body>
</html>

js mouseup和mousedown 阻止冒泡事件-解决方法相关推荐

jQuery阻止冒泡事件的方法
jQuery提供了两种阻止冒泡事件的方法方式一.event.stopPropagation() $('#div1').mousedown(function(event){ event.stopPro ...
JS中阻止冒泡事件的三种方法
冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡. <div class="box"><button c ...
分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
本来都要休息了还是打开github,解决了线上一个插件的兼容性. 看来今晚能睡的比较踏实了! 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一,应用灵活,体积小,功能强大. 图 ...
js jquery阻止冒泡事件
event.stopPropagation(); -- 阻止元素冒泡事件注:嵌套元素一般都存在冒泡事件,会带来某些影响例:<div id="c1" οnclick=& ...
JS如何阻止冒泡事件
1.背景 1.1 什么是事件冒泡当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . 优点:事件委托可以利用事件冒泡,来达到只指定一个事件处理程序就可以管理某一项类型 ...
html 传参阻止冒泡,angular阻止冒泡事件
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了. 以angular项目为例,我们都知道angular ...
阻止点击冒泡的解决方法
阻止点击冒泡的解决方法今日遇到问题: 在父元素上有点击事件,子元素上也有点击事件,点击子元素,触发子元素的点击事件,会出现冒泡,然后父元素的点击事件也被触发了,此时的解决方法是在子元素的点击事件的回 ...
vue阻止冒泡事件（特殊情况）
问题父级的div绑定了click事件,如果子级需要一个特殊的组件,例如:<el-popover>,本身是不需要点击事件的但是可以点击触发.这时候组件本身的点击事件就与父级div的点击事件 ...
jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

js mouseup和mousedown 阻止冒泡事件-解决方法

js mouseup和mousedown 阻止冒泡事件-解决方法相关推荐

最新文章

热门文章