请教一个JS事件冒泡问题
0
悬赏园豆：20
[已解决问题]
解决于 2011-12-08 16:29
一个页面有上下两个DIV，第一个DIV内还有其他链接，我想实现的效果是点击第一个个DIV内的空白区域显示（或隐藏）第二个DIV，如果点击第一个DIV内的链接时不触发DIV的onclick事件。我的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowOrHide(){
var state=$("#test").css("display");
if(state=="none"){
$("#test").css("display","");
}
else{
$("#test").css("display","none");
}
}
function jstest(){
alert("jstest");
}
</script>
</head>
<body>
<div style="border:1px solid #000;margin:10px;padding:10px;" onclick="ShowOrHide()">
Click This Div<br/>
<a target="_blank" href="http://q.cnblogs.com">http://q.cnblogs.com</a><br/>
<a href="javascript:void(0);" onclick="jstest()">jstest</a><br/>
</div>
<div id="test" style="display:none;border:1px solid #000;background-color:#CCC">
test
</div>
</body>
</html>
现在的问题是点击第一个DIV内的链接(共两个)时触发了DIV的onclick事件，有没有办法不触发。
可以在这里在线测试：http://jsfiddle.net/NVnQC/
最佳答案
0
比较麻烦，需要在你不想它冒泡的click事件执行的方法中限制冒泡。见下面我加了stopBubble函数的代码，在你的两个A链接click事件中我都调用了就可以了。你可以用jquery给所有不想冒泡的控件批量加上限制。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowOrHide(){
var state=$("#test").css("display");
if(state=="none"){
$("#test").css("display","");
}
else{
$("#test").css("display","none");
}
}
function jstest(){
stopBubble();
alert("jstest");
}
function stopBubble() {
//阻止冒泡调用parent
var e = (event) ? event : window.event;
if (window.event) {//IE
e.cancelBubble=true;
} else { //FF
e.stopPropagation();
}
}
</script>
</head>
<body>
<div style="border:1px solid #000;margin:10px;padding:10px;" onclick="ShowOrHide()">
Click This Div<br/>
<a target="_blank" href="http://q.cnblogs.com" onclick="stopBubble()">http://q.cnblogs.com</a><br/>
<a href="javascript:void(0);" onclick="jstest()">jstest</a><br/>
</div>
<div id="test" style="display:none;border:1px solid #000;background-color:#CCC">
test
</div>
</body>
</html>
收获园豆：20
非常感谢
刚才测试了一下，你的代码在IE下可以，在FireFox下出错，说event没定义，我稍改了一下现在都可以了：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowOrHide(){
var state=$("#test").css("display");
if(state=="none"){
$("#test").css("display","");
}
else{
$("#test").css("display","none");
}
}
function jstest(event){
stopBubble(event);
alert("jstest");
}
function stopBubble(evt) {
if (window.event) {//IE
window.event.cancelBubble=true;
}
else { //FF
evt.stopPropagation();
}
}
</script>
</head>
<body>
<div style="border:1px solid #000;margin:10px;padding:10px;" onclick="ShowOrHide()">
Click This Div<br/>
<a target="_blank" href="http://q.cnblogs.com" onclick="stopBubble(event)">http://q.cnblogs.com</a><br/>
<a href="javascript:void(0);" onclick="jstest(event)">jstest</a><br/>
</div>
<div id="test" style="display:none;border:1px solid #000;background-color:#CCC">
test
</div>
</body>
</html>
