1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Js阻止事件冒泡和阻止默认事件

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

时间:2021-04-10 23:13:07

相关推荐

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

js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别

1、event.stopPropagation()方法

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

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

2、event.preventDefault()方法

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

form表单如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。a元素中href连接,如果调用此方法是,连接不会被打开。

注意

如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。该方法会发生冒泡,冒泡会传递到上一层的父元素。

3、return false;

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

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

4、实例讲解

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

<div id="box"><a id="box2" href="">百度</a></div>

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

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

第二种:阻止默认事件

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

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

第三种:阻止事件冒泡

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

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

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

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

等同于

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

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

面试题

1、什么是事件冒泡?什么是事件捕获?

冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

2.如何阻止冒泡?

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true。

例如:

window.event? window.event.cancelBubble = true : e.stopPropagation();return false 也可以阻止冒泡。

3.如何阻止默认事件?

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false,比如:

function stopDefault( e ) {//阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; }

return false也能阻止默认行为。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。