我是靠谱客的博主 昏睡蜡烛,最近开发中收集的这篇文章主要介绍javascript怎么禁止事件冒泡,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

javascript怎么禁止事件冒泡

原生 JS 中,对事件对象 (event) 有 2 种主要的方法;

stopPropagation 和 preventDefault

第一个是禁止冒泡,第二个是阻止默认行为

注:这是原生 JS 的方法,并非 jQuery 的方法,event 形参可以为任何变量,比如用 e 这个也可以的;

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡;
            // preventDefault中文意思是阻止默认行为;
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
        }
    }
登录后复制
登录后复制

1、事件的禁止冒泡

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡;
            // preventDefault中文意思是阻止默认行为;
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
        }
    }
登录后复制
登录后复制

2、return 的阻止

    ele.onmouseover=function(){
        return false
    }
登录后复制

区别。

return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。

event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

整理:

1.event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(可执行超链接的跳转)

2.return false;

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(不执行超链接的跳转)

还有一种有冒泡有关的:

event.preventDefault();
登录后复制

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

【相关推荐:javascript视频教程、web前端】

以上就是javascript怎么禁止事件冒泡的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是昏睡蜡烛为你收集整理的javascript怎么禁止事件冒泡的全部内容,希望文章能够帮你解决javascript怎么禁止事件冒泡所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(64)

评论列表共有 0 条评论

立即
投稿
返回
顶部