Js阻止事件冒泡与阻止默认事件
发布日期:2021-05-10 03:43:32 浏览次数:20 分类:技术文章

本文共 1633 字,大约阅读时间需要 5 分钟。

Js阻止事件冒泡与阻止默认事件

1、event.stopPropagation()方法

event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。

提示:请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。

2、event.preventDefault()方法

取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如:

form表单如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。

a元素中href连接,如果调用此方法是,连接不会被打开。

注意

1)、如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

2)、该方法会发生冒泡,冒泡会传递到上一层的父元素。

3、return false;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;

可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

4、实例讲解

这是html代码,在div里面套了一个a标签,连接到百度。

第一种:不阻止事件冒泡和默认事件

document.getElementById('box').onclick=function(e){
console.log("1");//不阻止事件冒泡会打印1,页面跳转; }

第二种:阻止默认事件

document.getElementById('box').onclick=function(e){
console.log("1");}document.getElementById('box_1').onclick=function(e){
e.preventDefault();//阻止默认事件}

我们会发现阻止了默认事件,点击a标签页面不会跳转,但是会打印出1。说明e.preventDefault()只能阻止默认动作,但是冒泡仍然会发生。

第三种:阻止事件冒泡

document.getElementById('box').onclick=function(e){
console.log("1");}document.getElementById('box_1').onclick=function(e){
e.stopPropagation();//阻止事件冒泡}

点击a标签,页面会跳转到百度,但是在控制台中是没有打印“1”的。

第四种:阻止事件冒泡和默认事件

document.getElementById('box').onclick=function(e){
console.log("1");}document.getElementById('box_1').onclick=function(e){
e.stopPropagation(); e.preventDefault();//阻止默认事件}

等同于

document.getElementById('box_1').onclick=function(e){
return false;}

页面不会跳转,也不会打印出1。这里return false;等于同时调用了event.stopPropagation()和event.preventDefault()。

转载地址:https://blog.csdn.net/qsj0606/article/details/116040910 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Git命令
下一篇:小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年11月01日 11时52分31秒