首页 » 前端技术 » jQuery冒泡事件是什么及如何阻止冒泡事件的解决方法

jQuery冒泡事件是什么及如何阻止冒泡事件的解决方法

高蒙 2016/12/12 10:42 2.2k浏览 0评论 jQuery/js


jquery冒泡事件是什么?

冒泡事件的触发就是在特定的demo元素里,如果祖先,父级和节点上都绑定了点击事件的话,那么在点击子节点,会向上触发父节点,祖先节点的点击事件。

html代码如下:

<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
</body>

对应的jQuery代码如下:

$(function(){
    // 为span元素绑定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
        $('#msg').html(txt);// 设置html信息
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何阻止冒泡事件的解决方法?

jQuery提供了两种方式来阻止事件冒泡。

方式一:event.stopPropagation();

        $("#div").click(function(event){
            event.stopPropagation();
        });

方式二:return false;

        $("#div").click(function(event){
            return false;
        });

但是这两种方式是有区别的。

  1. return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。 会把浏览器默认事件和冒泡干掉。

  2. event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

知道了解决jquery冒泡事件的发生,那么上面的代码可以这样修改,阻止冒泡事件的触发。

第一种:使用event.stopPropagation()

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

第二种:使用return false

<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

通过文章我们可以了解到jQuery冒泡事件的介绍及如何阻止冒泡事件和解决的方法。




相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    484

    标签

    41

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。