js 阻断事件传播及阻止默认事件

最新推荐文章于 2024-06-20 07:32:02 发布

jvortex

最新推荐文章于 2024-06-20 07:32:02 发布

阅读量2k

点赞数

分类专栏：前端文章标签：事件冒泡

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

阻止事件冒泡，不触发父元素事件

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

阻止默认行为，不影响自定义的行为。

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

例子如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
 <script type="text/javascript" src="F:\essential\js\jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('div.c1').click(function(e){alert('单击了div');});
$('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
$(document).click(function(e){alert('单击了document');});
$('#txt1').val('未阻止冒泡与默认事件');
$('#txt1').keydown(function(e){alert('你按下了键值'+e.keyCode); });
$('#txt2').val('未阻止冒泡与默认事件');
$('#txt2').click(function(e){stopBubble(e);});
$('#txt2').keydown(function(e){
stopDefault(e);
alert('你按下了键值'+e.keyCode); //这句话不会阻止，因为它不是默认行为，是手动指定的行为
});
})

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
     else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; //不是e.cancelBubble
} 
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; //不是e.returnValue=false;
    return false; 
}
</script>
<style type="text/css">
body{
font-size:14px;
    }
}
.c1{
    font-family:"Arial Unicode MS"
    }
.c2{
    font-family:helvetica,simsun,arial,clean
    }
</style>
</head>

<body>

<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>

<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>

<div><input id="txt1" name="Text1" type="text" /></div><hr/>
<div><input id="txt2" name="Text2" type="text" /></div><hr/>

</body>
</html>

注意
网上总结
函数一:IE6.0,FireFox,Chrome,Opera均有效
函数二:在IE中测试效果很好;Chrome,Opera无效,在FF中,按键时,如果在
$(‘#txt1’).keydown(function(e){stopDefault(e);alert(‘你按下了键值’+e.keyCode); });
这句话打个断点在执行,可以达到效果.但是如果不打断点则没有效果,没找出具体原因.

jvortex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 阻断事件传播及阻止默认事件

阻止事件冒泡，不触发父元素事件 function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事
复制链接

扫一扫