JavaScript：stopPropagation(), preventDefault(), return false总结，看完肯定会明白

最新推荐文章于 2023-07-12 16:12:23 发布

spring19840513

最新推荐文章于 2023-07-12 16:12:23 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript xhtml div html function 浏览器

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

event.stopPropagation(); // 事件停止冒泡，即不让事件再向上传递，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。

event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。

在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。

示例：

<!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" lang="gb2312">  
<head>  
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>  
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />  
<mce:script type="text/javascript"><!--  
function doSomething (obj,evt) {  
    alert(obj.id);  
    var e=(evt)?evt:window.event;  
    if (window.event) {  
        e.cancelBubble=true;     // ie下阻止冒泡  
    } else {  
        //e.preventDefault();    // 链接不会被打开，但事件仍会向上传递  
        e.stopPropagation();     // 其它浏览器下阻止冒泡，但链接仍会被打开  
    }  
}  
// --></mce:script>  
</head>  
<body>  
<div id="parent1" οnclick="alert(this.id);" style="width:250px;background-color:yellow">  
    <p>This is parent1 div.</p>  
    <div id="child1" οnclick="alert(this.id);" style="width:200px;background-color:orange">  
        <p>This is child1.</p>  
    </div>  
    <p>This is parent1 div.</p>  
</div>  
  
<br />  
  
<div id="parent2" οnclick="alert(this.id);" style="width:250px;background-color:cyan;">  
    <p>This is parent2 div.</p>  
    <div id="child2" οnclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">  
        <a href="http://www.baidu.com" mce_href="http://www.baidu.com">This is child2. Go to Baidu. Will bubble.</a>  
    </div>  
    <p>This is parent2 div.</p>  
</div>  
</body>  
</HTML>

来源：http://blog.csdn.net/krisy0102/article/details/6050545

spring19840513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：stopPropagation(), preventDefault(), return false总结，看完肯定会明白

event.stopPropagation(); // 事件停止冒泡，即不让事件再向上传递，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。在事件处理函数中使用
复制链接

扫一扫