专栏首页Vue开发社区JavaScript阻止冒泡和取消默认事件(默认行为)

JavaScript阻止冒泡和取消默认事件(默认行为)

JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

防止冒泡和捕获

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

stopPropagation也是事件对象(Event)的一个方法,用是阻止目标元素的冒泡事件,但是会不阻止默认行为。

什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。

stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

上面的代码,Demo如下,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。

阻止冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();

取消默认事件

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

preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。

什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

我们都知道,链接<a>的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:

//假定有链接<a href="http:// fly63.com/" id="testA" > fly63.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

return false

JavaScript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

下面这个使用原生js,只会阻止默认行为,不会停止冒泡

<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http:// fly63.com/"id="testB"> fly63.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

下面这个是使用jQuery,既阻止默认行为又停止冒泡

<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http:// fly63.com/"id="testC"> fly63.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

总结使用方法

当需要停止冒泡行为时,可以使用

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止默认行为时,可以使用

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

事件注意点
  1. event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
  2. event对象只在事件发生的过程中才有效。

firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。

在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

下面两句效果相同:

function a(e){
var e = (e) ? e : ((window.event) ? window.event : null); 
var e = e || window.event; // firefox下window.event为null, IE下event为null
}

总结

感谢您的时间,感谢您的阅读。

文章分享自微信公众号:
前端开发社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2021-11-01
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • JavaScript停止冒泡和阻止浏览器默认行为

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

    仙士可
  • 阻止冒泡和阻止默认事件的兼容写法

    //阻止冒泡的兼容性写法 function stopBubble(event){ var e=arguments.callee.caller.argum...

    李文杨
  • jquery取消元素默认冒泡事件

    十月梦想
  • js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 浏览器默认行为: 在form中按回车键就会提交表单;单击鼠标...

    蓓蕾心晴
  • js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

    yaphetsfang
  • 如何阻止冒泡&&浏览器默认行为

    很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。

    Jerremy
  • jQuery阻止冒泡和HTML默认操作

    deepcc
  • IE下面阻止selectstart事件的默认行为来阻止用户选中

    Chrome、Firfox等高级浏览器,可以通过一句简单的CSS,来阻止用户选中文本。

    libo1106
  • JavaScript学习笔记024-默认行为0滚轮事件

    Mr. 柳上原
  • 原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?

    点击“点击我”,会依次弹出:最里层---->中间层---->最外层---->然后跳转链接,这就是事件冒泡,下面来看看如何解决这个问题

    Javanx
  • 阻止a标签的默认事件及延伸

    先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

    吴裕超
  • 一次关于js事件出发机制反常的解决记录

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况...

    吴裕超
  • Web开发的基本功

    #ThoughtWorkers好声音#第十五期 (图片:网络) 有些东西称为基本功,对于 Web 开发而言,事件处理模型便是其中的一个,我们经常会在代码里遇到...

    ThoughtWorks
  • 浅谈JavaScript的事件(事件对象)

      在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作...

    水击三千
  • JavaScript的事件

    javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

    小小鱼儿小小林
  • JQuery IE下如何阻止keydown事件冒泡

    根据用户输入的内容按回车键作查询时,在IE下一直会触发一个Button按钮;IE下只有Button才会有这个问题,如果是a标签就不会有这样的问题?

    Java架构师必看
  • JavaScript事件探秘

    事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

    张张

扫码关注腾讯云开发者

领取腾讯云代金券