网站建设资讯

NEWS

网站建设资讯

javascript如何禁止事件冒泡

本篇内容主要讲解“javascript如何禁止事件冒泡”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript如何禁止事件冒泡”吧!

目前创新互联公司已为上1000家的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、寿阳网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

方法:1、利用stopPropagation()方法禁止,但不会阻止默认行为,语法“event.stopPropagation()”;2、利用return方法禁止,同时阻止默认行为,语法“function(){return false}”。

本教程操作环境: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如何禁止事件冒泡”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文名称:javascript如何禁止事件冒泡
转载来源:http://cdweb.net/article/pocicd.html