阻止事件执行的三种方法(preventDefault、stopImmediatePropagation、stopPropagation)横向对比

最新推荐文章于 2023-10-25 13:58:14 发布
最新推荐文章于 2023-10-25 13:58:14 发布
阅读量2.6k 收藏 3
点赞数 2
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanshaobo888/article/details/106373804
版权
最新更新时间：2020年05月27日10:57:02
《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：Event对象的一些知识点，事件注册、事件对象、阻止事件

概述

Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）。

为DOM元素注册事件处理函数的三种方式
  • 方式一：EventTarget.addEventListener
myButton.addEventListener('click', function(){alert('Hello world');}, false);
  • 方式二：HTML 属性
<button onclick="alert('Hello world!')">
  • 方式三：DOM 元素属性
myButton.onclick = function(event){alert('Hello world');};
三种方式的实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="div" onclick="htmlAttr()">123</div>
</body>
<script>
	functionhtmlAttr(){
		console.log(1);
	}
    let div = document.getElementById('div')
    div.addEventListener('click', function(){console.log(2);}, false);
    div.onclick = function(event){console.log(3);}; 
</script>
</html>

输出的结果：3 2

    let div = document.getElementById('div')
    div.addEventListener('click', function(){console.log(2);}, false);
    div.onclick = function(event){console.log(3);};
    function htmlAttr(){
        console.log(1);
    }

输出的结果：3 2

	functionhtmlAttr(){
		console.log(1);
	}
    let div = document.getElementById('div')
    div.addEventListener('click', function(){console.log(2);}, false);

输出的结果：1 2

    let div = document.getElementById('div')
    div.addEventListener('click', function(){console.log(2);}, false);
    	functionhtmlAttr(){
		console.log(1);
	}

输出的结果：1 2

  • 总结：方式三可以覆盖方式二，方式一最晚执行
DOM Event 接口中阻止事件执行的三个方法
  • event.preventDefault

取消事件（如果该事件可取消）。阻止默认行为，比如：页面滚动、复选框选中、在文本编辑域中阻止有效的文本输入

使用 Event.cancelable 来检查该事件是否支持取消。为一个不支持cancelable的事件调用preventDefault()将没有效果。

  • event.stopImmediatePropagation

场景一：同一DOM元素上相同的多个事件按照先后顺序执行的行为被终止。
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="sup">
    <div id="sub">123</div>
</div>
</body>
<script>
    let sub = document.getElementById('sub')
    sub.addEventListener('click', function(e){
        e.stopImmediatePropagation()
        console.log(3);
        }, false);
    sub.addEventListener('click', function(e){
        console.log(4);
    }, false);
</script>
</html>

输出的结果：3

场景二：阻止事件冒泡，祖先元素上的相同事件不会执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="sup" onclick="htmlAttr()">
    <div id="sub">123</div>
</div>
</body>
<script>
    function htmlAttr(){
        console.log(1);
    }
    let sup = document.getElementById('sup')
    let sub = document.getElementById('sub')
    sup.addEventListener('click', function(){console.log(2);}, false);
    sub.addEventListener('click', function(e){
        e.stopImmediatePropagation()
        console.log(3);
        }, false);
</script>
</html>

输出的结果：3

对这个特定的事件而言，没有其他监听器被调用。这个事件既不会添加到相同的元素上，也不会添加到以后将要遍历的元素上（例如在捕获阶段）。

  • event.stopPropagation

只包含event.stopImmediatePropagation中的场景二。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="sup" onclick="htmlAttr()">
    <div id="sub">123</div>
</div>
</body>
<script>
    function htmlAttr(){
        console.log(1);
    }
    let sup = document.getElementById('sup')
    let sub = document.getElementById('sub')
    sup.addEventListener('click', function(){console.log(2);}, false);
    sub.addEventListener('click', function(e){
        e.stopPropagation()
        console.log(3);
        }, false);
    sub.addEventListener('click', function(e){
        console.log(4);
    }, false);
</script>
</html>

输出的结果：3 4

event.preventDefault应用场景
  • 当移动一个可拖动元素(比如悬浮球)时，需要阻止页面滚动
onTouchStart(e){
	let _this = this;
	document.body.addEventListener('touchmove', _this.preventScroll, {passive: false});//passive 参数不能省略，用来兼容ios和android
}

onTouchEnd(e){
	let _this = this;
	document.body.removeEventListener('touchmove', _this.preventScroll);
}

preventScroll(e){
	e.preventDefault();//阻止页面滚动
}

render(){
	return <div
			onTouchStart={(e)=>{this.onTouchStart(e)}}
			onTouchMove={(e)=>{this.onTouchMove(e)}}
			onTouchEnd={(e)=>{this.onTouchEnd(e)}}
			></div>
}
event.stopImmediatePropagation应用场景
  • react中阻止事件监听器冒泡：页面中的图片位置和数量不定，当用户点击图片时需要进行放大预览，如果图片的祖先元素绑定了click事件，此时不需要触发
let _this = this;
document.addEventListener('click',function(e){
	let dom = e.target;
	let src = e.target.getAttribute('src');
	//可以进行预览的图片域名为wansahobo
	if(dom.tagName.toLowerCase() == 'img' && src.indexOf('wanshaobo') > -1){
		e.stopImmediatePropagation();//阻止祖先元素的click事件触发
		_this.previewImg(src);//放大预览
	}
},false);
event.stopPropagation应用场景
  • 阻止祖先元素上方式一和方式二的相同类型注册事件，但不能阻止方式三
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="sup" onclick="htmlAttr()">
    <div id="sub">123</div>
</div>
</body>
<script>
    function htmlAttr(){
        console.log(1);
    }
    let sup = document.getElementById('sup')
    let sub = document.getElementById('sub')
    sup.addEventListener('click', function(){console.log(2);}, false);
    sub.addEventListener('click', function(e){
        e.stopPropagation()
        console.log(3);
        }, false);
    sub.addEventListener('click', function(e){
        console.log(4);
    }, false);
    sup.onclick = function(event){console.log(5);};
</script>
</html>

输出的结果：3 4 5

横向对比
  • 在事件注册方式一EventTarget.addEventListener中，横向对比三种阻止事件的方法
-preventDefaultstopImmediatePropagationstopPropagation
阻止祖先元素上的事件绑定方式一否是是
阻止祖先元素上的事件绑定方式二否是是
阻止祖先元素上的事件绑定方式三否是否
阻止元素自身的事件绑定方式一否是否
阻止元素自身的事件绑定方式二否是是
阻止元素自身的事件绑定方式三否是否
阻止浏览器默认行为是否否
event对象实例
clickDiv(e){
	console.log(e.target);//被点击的元素
	console.log(e.currentTarget);//绑定该事件的元素
}

render(){
	return <div onClick={(e)=>{this.clickDiv(e)}}></div>
}
Demo源码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<!-- 2 -->
<div id="sup" onclick="supC()">
    <div id="sub"  onclick="subC()">123</div>
</div>
</body>
<script>
    let sup = document.getElementById('sup')
    function supC(){
        console.log(1);
    }
    sup.onclick = function(event){console.log(2);};
    sup.addEventListener('click', function(e){
        console.log(3);}, false);
    sup.addEventListener('click', function(){
        console.log(4);
        }, false);

    let sub = document.getElementById('sub')
    function subC(){
        console.log(5);
    }
    sub.addEventListener('click', function(e){
        // e.preventDefault()
        // e.stopImmediatePropagation()
        // e.stopPropagation()
        console.log(6);
        }, false);
    sub.addEventListener('click', function(e){
        console.log(7);
    }, false);
    sub.onclick = function(event){console.log(8);};
</script>
</html>
参考资料

感谢阅读，欢迎评论^-^

打赏我吧^-^

万少博
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery事件e参数的方法preventDefault()取消默认行为
10-26
JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为，下有个不错的示例，大家可以参考下，希望对大家有所帮助
jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用
time
02-24 335
阻止事件发生2种写法&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &a
Vue基础3之事件处理
qq_34306228的博客
11-08 3263
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
jquery的冒泡事件的阻止与允许(三种实现方法)
01-21
有时我们不希望冒泡或默认的事件发生，这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。可以通过以下三种方法做到不同程度的阻止。 A：return false —>In event handler ,prevents default behavior and event bubbing 。 return false 在事件的处理中，可以阻止默认事件和冒泡事件。 B：event.preventDefault()—> In event handler ,prevent default event (allows bubbling) 。 event.preventDefault()在事件的处理
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
巧克力很苦的小博客
09-06 1024
阻止事件传播 阻止事件传播e.stopPropagation() 谷歌浏览器 阻止事件传播（冒泡阶段） var oBig = document.getElementById('big'); var oSmall = document.getElementById('small'); oBig.addEventListener('click',func...
js 阻止事件执行
weixin_30697239的博客
04-11 2293
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false event.preventDefault() 阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type="submit" 的 input 标签提交表单，你在 onclick ...
JS中如何阻止事件的传播
webchang的博客
03-24 8112
使用stopPropagation和stopImmediatePropagation阻止事件的传播
Js事件流概述，以及阻止事件冒泡、阻止默认行为
Microhoo_苏福的博客
09-13 1098
Js事件流概述，以及阻止事件冒泡、阻止默认行为
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
m0_48895748的博客
12-07 8717
快速理解阻止事件冒泡的4种方法，使用原生js或者vue中阻止事件冒泡
如何阻止事件冒泡和默认事件
最新发布
wangxuanyang_zer的博客
10-25 686
阻止事件冒泡和默认事件是Web开发中的重要技巧，可以帮助您实现更复杂的交互行为和提供更好的用户体验。了解如何使用event.stopPropagation()和event.preventDefault()是处理事件的基本技能，尤其在需要精细控制事件流和默认行为时。同时，谨慎使用这些技术，以确保用户体验的一致性和可用性。
js中的preventDefault与stopPropagation详解
12-12
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的...
jquery事件preventDefault()方法用法实例
10-24
主要介绍了jquery事件preventDefault()方法用法,实例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以参考下
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
weixin_46106512的博客
03-29 4402
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、阻止事件冒泡和默认行为二、拖拽1, 实现拖拽相关的三大事件:2, 实现拖拽思路：1, 给目标元素添加onmousedown事件(鼠标按下事件)2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:3, 在onmousedown事件(鼠标按下事件)发生以后，给document.
JavaScript阻止默认事件
weixin_47306019的博客
11-16 3948
阻止默认事件： 标准浏览器：事件对象.preventDefault(); 低版本IE浏览器：事件对象.returnValue= false;常见默认事件： 若a标签在html中href写有URL默认的跳转地址 则在js中添加a的点击事件，并用event.preventDefault();阻止默认事件发生 实际项目中 a标签在html中写 让a标签执行js程序， 然后在js中用
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 4304
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
js事件传播流程，事件阻止以及事件流的三个过程
枫叶时代的博客
05-29 856
js事件传播
组件化开发-06-事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault()& 关于事件函数的this处理-使用箭头函数& 给事件函数传递参数用法-onClick
weixin_44867717的博客
02-02 642
事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault() & 关于事件函数的this处理-使用箭头函数 & 给事件函数传递参数用法-onClick 事件绑定方式 // handle为函数名称 <button onClick={this.handle}>点击</button> class TestEvent extends React.Component { constructor(props) { su
preventDefault与stopPropagation的作用
李小贱的博客
06-29 1万+
如题，本篇文章讨论preventDefault和stopPropagation二者的作用，首先，先理解一下二者的字面意思： 一、preventDefault，prevent是动词，意为“防止，阻止”；Default是名词，有“系统默认值”的意思，preventDefault在js中的意思就   是“阻止系统默认（行为）”。 二、stopPropagation，stop是动词，意为“中止”；
前后端分离之用户登录状态管理和校验
热门推荐
万少博-FE
06-10 1万+
最新更新时间：2019年06月10日17:23:05 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 本文内容：前后端开发分离，如何实现用户登录状态监控和校验，要解决的几个问题： A用户登录A机器成功，此时A用户登录B机器，A机器的A用户登录状态需要下线，即保证一个用户只能同时在线一台机器； A用户登录成功，一周之内不需要再次登录； 实现原理 用户首次访问站点，后端从请求体中读取co...
preventdefault与stoppropagation详解
09-01
在事件的处理函数中调用该方法，可以阻止浏览器执行事件所关联的默认行为。比如，当点击一个链接时，浏览器会默认打开链接对应的页面，但如果在点击事件的处理函数中调用了preventDefault方法，那么浏览器就不会打开...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值