一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

一开始上html代码

<div id="div1" style="background: blue;width: 100px; height: 100px;">

        <div id="div2" style="background: red;width: 70px; height: 70px;">

        </div>

</div>

就是这样的一段代码，

大的div==>div1

小的div==>div2

当代码是

$('#div1').click(function(e) {

    alert('div1');

})

$('#div2').click(function(e) {

    alert('div2');

})

正常这样写点击代码，当点击在div2上这个区域，会触发到div1的点击事件，就是会先弹出div2-->div1

但是我想要的效果只是想点击div2区域时，只弹出div2

那现在这里有两种方案，还有的请欢迎补充

第一种，因为是冒泡了，所以阻止冒泡

$('#div1').click(function(e) {

    alert('div1');

})

$('#div2').click(function(e) {

    e.stopPropagation()

    alert('div2');

})

这样的话，点击div2区域只会弹出div2

点击div1只会弹出div1

第二种，因为div2覆盖在div1里面，所以不管你点击那个地方，都是触发了div1的区域，所以当点击的时候，判断这个区域是不是div2的区域，如果是的话，就触发div2，如果不是的话就触发div1

 $('#div1').click(function(e){

     // e.preventDefault();

     if($(e.target).is('#div2')){

         alert('div2')

     }else{

         alert('div1')

     }

 })

好了我试过的就是这两种方案，欢迎大家指教补充

现在还有一种情况，就是如果是两个div外面还有一个a标签的话，想点击大的div的时候跳转链接，点击小的div的话还是执行其他操作的话

html结构代码如下

   <a href='http://www.baidu.com'>

    <div id="div1" style="background: blue;width: 100px; height: 100px;">

        <div id="div2" style="background: red;width: 70px; height: 70px;">

        </div>

    </div>

  </a>

现在的效果是想点击div2的时候执行一个事件，点击div1的时候跳转链接

这样的话可以有两种方案

第一种:阻止默认事件也就是a标签跳转

$('#div2').click(function(e) {

    alert('div2');

    event.preventDefault();

})

第二种：return

$('#div2').click(function(e) {

    alert('div2');

    return false;

})

巴特西

一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

最新文章

热门文章