Question

div设定onclick后，如何点其中的超链接不触发onclick

我有个div 并设定onclik='alert()' 这个div中间有超链接<a href="#">sd</a>
问题是这样，如何能够在我点这个超链接的时候不触发这个onclick，但是在点除了这个超链接的其他空白处的时候都能触发这个属性？

Answer 1

这是事件冒泡导致的，请看demo。

HTML代码：

<div id="box"><a href="#" class="link">TEST</a></div>

JS代码：

document.getElementById('box').onclick = function(){
	alert('box被点击了');
}
document.getElementsByClassName('link')[0].onclick = function(){
	alert('a被点击了');
}
//div里点击会先后触发以上两个事件

div设定onclick后，点其中的超链接a会触发div的onclick事件！

原因：子元素事件冒泡到父节点上了。

解决办法：在子节点上阻止事件冒泡：

//如果想让a点击的时候不触发box的点击事件：
document.getElementsByClassName('link')[0].onclick = function(e){
	alert('a被点击了');
	e.stopPropagation();//阻止向上冒泡
}

这样，点击a标签只会提示“a被点击了”，并不会出现“box”被点击的提示。

Answer 2

在<a>上停止事件冒泡就可以了

如
<a href="#" onclick="event.stopPropagation()||(event.cancelBubble = true);">sd</a>

event.stopPropagation()是在firefox里停止事件向上一层发送
event.cancelBubble = true是在Ie里用的,不过firefox 3 以上也支持这个.