关于js中的冒泡事件和html默认事件解决方案

taking_wang

于 2012-03-19 10:03:53 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

分类专栏：前台 web 前台 web_jquery 前台 web_dwr 文章标签： html

本文链接：https://blog.youkuaiyun.com/taking_wang/article/details/7367611

前台 web 同时被 3 个专栏收录

38 篇文章

订阅专栏

前台 web_jquery

15 篇文章

订阅专栏

前台 web_dwr

8 篇文章

订阅专栏

本文详细解释了如何在HTML中通过JavaScript阻止事件冒泡，特别关注于单击事件与a标签与span标签之间的交互。介绍了使用事件对象阻止冒泡的方法，并展示了jQuery的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eg:

<span onClick="spanClick()"> testSpan<a onClick="aClick(this,'test',event)">testa</a></span>

当我们单击a标签的时候span标签的onClick事件也会被执行。。这时候就要阻止冒泡事件的发生。必须在单击a标签的时候执行以下事件

//得到事件
   var e = arguments[2] || window.event;    //arguments[2]是为了取出传参过来的第三个参数

   if(e.stopPropagation) { //ff阻止冒泡方法
    e.stopPropagation();
   } else {
    e.cancelBubble = true; //IE阻止冒泡方法
   }

jquery 防止冒泡：

$('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });