网站地图    收藏   

主页 > 前端 > javascript >

javascript 阻止冒泡和浏览器的默认行为详解

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章来给大家介绍一个javascript 阻止冒泡和浏览器的默认行为一些实例,希望些方法对各位同学有所帮助哦。...

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题。

1、阻止事件冒泡

 代码如下 复制代码

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


2、阻止默认行为

当按键后或者点击一个链接后,不希望按键或者链接执行时,可以取消返回值.即停止默认事件默认行为

2.1、阻止链接

 代码如下 复制代码

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

示例 : 点击页面的任何URL链接 不跳转。

 代码如下 复制代码

var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onlick = function(e) {
        alert('我不跳转,点我也没用');
        stopDefault(e);
    }
}

2.2、阻止下拉菜单


另一个阻止冒泡常见的应用就是下拉菜单的效果,点击按钮,下拉菜单显示,在点击页面任何其它部分,下拉菜单隐藏。

 代码如下 复制代码

//给document添加点击事件,点击时关闭菜单,默认情况下,点击任何元素,都会冒泡的到document
document.onclick = function(){
    b.style.display = "none";
}
 
//为点击元素显示下拉菜单的元素阻止冒泡,这样document的click事件就被阻止执行
function showMenu(e) {
    var e = window.event || e;
    b.style.display = "block";
 
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble=true;
    }
}
 
btn.onclick=b.onclick = showMenu;

3、Jquery阻止事件冒泡
如果使用jquery库的进行绑定dom的事件,处理方式则为:

 代码如下 复制代码

$(selector).click(function(event) {
    event.stopPropagation();
    //do somethine
});

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论