两个点击事件，大的DIV包含小的DIV，点击小的DIV，大的也会触发，怎么处理？

Question

两个点击事件，大的DIV包含小的DIV，点击小的DIV，大的也会触发，怎么处理？
如图描述，现在点击小DIV里面的click,大的DIV也触发，现在只想点击小的DIV只触发小的click事件，怎么处理？

现在

Answer 1

stopPropagation()

Answer 2

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window），被称为事件冒泡。

//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}

Answer 3

是JS的冒泡(捕获)事件

类似这样的解决方法蛮简单的

$('.div1').on('click', function(event) {
    event.preventDefault();
    if ($(event.target).is('.div2')) {
        alert('click 2')
    }else{
        alert('click 1')
    }
});

Answer 4

js冒泡 取消冒泡就行了
事用事件委托 就不会出现这种问题了

Answer 5

看完这两篇文章不懂来找我：

http://javascript.info/bubbli...
https://stackoverflow.com/que...

Answer 6

我想到有两种解决方法：
1.阻止事件冒泡。
事件冒泡是从里面的子元素逐级执行到外面的父元素，当执行子元素的点击事件的时候，需要调用冒泡阻止事件，这样事件就不能传递到上层，去执行上层的事件。
2.根据引起点击的元素不同来执行不同的事件。
当点击的元素是子元素引起的，执行A事件，如果不是子元素，则执行B事件。

Answer 7

阻止冒泡就可以了，关于事件可看这里 https://segmentfault.com/a/11...

Answer 8

按照正常的做法是不会这样触发的，很想知道你到底用什么选择器来绑定点击事件的，你贴一下你的点击代码和你的div的html码更好