点击父div, 触发子div

statckOverFlow

翻译

导致整个原因是, javascript的一个特性,被叫做事件冒泡. 默认情况下, 你的事件会冒泡到DOM上.
当点击子节点的时候, 你将会自动触发父节点(祖先节点)的一个click事件.
默认情况下, 当点击一个元素, 冒泡的发生是从内到外的, 这以为着第一个子元素的点击事件将会触发,然后父元素也被触发, 祖先元素等等

你能够解决这个问题, 靠添加一个二次点击处理程序到你的子元素上, 并且告诉浏览器去停止传播跨浏览器兼容方式的冒泡, 例如:

<script language="javascript">    function parentHandler(e) {        alert('parent clicked');    };    function childHandler(e) {        if (!e) var e = window.event;        e.cancelBubble = true;        if (e.stopPropagation) e.stopPropagation();            alert('child clicked');    };    </script>

<div id="parent" onclick="parentHandler(event);">    Foo    <div id="child" onclick="childHandler(event)">        Bar    </div></div>