首页新闻找找看学习计划

请教一个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/

乱世文章的主页 乱世文章 | 初学一级 | 园豆:147
提问于:2011-12-08 15:19
< >
分享
最佳答案
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
LCM | 大侠五级 |园豆:6876 | 2011-12-08 16:15

非常感谢

乱世文章 | 园豆:147 (初学一级) | 2011-12-08 16:29

刚才测试了一下,你的代码在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>
乱世文章 | 园豆:147 (初学一级) | 2011-12-08 16:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册