怎么做到点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件?

issac宝华 发布于 2016/06/16 22:02
阅读 5K+
收藏 0

例如一下的代码:

html:

<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;">

    父元素

    <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div>

</div>

<script type="text/javaScript">

    /*子元素绑定的事件*/

    $(".elementI").click(function(){

        alert("elementI");

    });

    /*父元素绑定的事件*/

    $(".elementII").click(function(){

        alert("elementII");

    });


</script>


我想要达到的目的是,点击子元素区域只会触发子元素的事件,输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”.

请各路大神赐教!

加载中
1
zabcd117
zabcd117
$(".elementI").click(function(event){
    alert("elementI");
    event.stopPropagation()
});



勤快百灵
勤快百灵
太好了。终于解决这个问题了
issac宝华
issac宝华
多谢,学到了
0
源-代码
源-代码
上楼正解,应该是在子元素的方法里面调用停止冒泡的事件方法
0
前世疯狂
前世疯狂

引用来自“zabcd117”的评论

$(".elementI").click(function(event){
    alert("elementI");
    event.stopPropagation()
});



楼上正解
0
HandMU
HandMU
停止冒泡。
issac宝华
issac宝华
学到,谢啦
0
全体人员
全体人员
在子元素里return false也可以
issac宝华
issac宝华
试过,也是可以,多谢,学到了
0
milin
milin
阻止事件冒泡
issac宝华
issac宝华
学到,谢啦!
0
it1000001001
it1000001001
在事件处理函数中添加event参数(或者任一个参数),当事件触发时,也就创建了事件对象,该事件对象只有该事件处理函数才能访问到,当事件处理函数运行结束时,事件对象自动删除
$(Element).click(function(event){
     ..................
})
当在含有事件对象的处理函数中返回false(return false;),作用是阻止事件冒泡并且阻止元素默认行为。(元素的默认行为比如超链接的跳转、表单的提交等)
$(Element).click(function(event){
     ..................
     return false;

})


LZ,温故而知新,多看手册

issac宝华
issac宝华
学到,谢啦
返回顶部
顶部