javascript 一个方法莫名其妙的被调用2次??????? 本帖最后由 jinsong1213 于 2010-07-06 10:58:32 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 嗯。是不是有2个地方调用了这个show(); 这个,要看你调用show()的地方,你这些和show运行两次有什么关系...... 你不要贴show的代码啊,show被调用了两次,和show方法体关系不大,除非递归啊。把调用show的代码贴出来看看。 1.检查其它地方是否还有调用。2.修改方法名再试试3.会不会是A——B——A这种情况 <% for(int i=0;i<orgs.size();i++){ Object[] org = (Object[])orgs.get(i); %> <li style="text-align:left;padding-left:15px" id="root<%=i%>" onclick="return show('root<%=i%>','sub<%=i%>','img<%=i%>','idHidden<%=i%>','pathHidden<%=i%>')"> <a href="#"> <img id="img<%=i%>" src="/html/images/tree/plus.gif"/> <%=org[1].toString() %> <input id="idHidden<%=i%>" type="hidden" value="<%=org[0].toString() %>" /> <input id="pathHidden<%=i%>" type="hidden" value="<%=org[2].toString() %>"/> </a> <ul id="sub<%=i%>"></ul> </li> <%} %> 上边的html代码中有调用show()这个方法,这个时候,是正常的还有一处调用时在,1楼的getTree方法中. 生成下级目录的时候,也有个onclick 事件只有在这个事件(getTree()方法生成的下级目录中的onclick事件) 时候,才会调用2次. 第一次是正常的,id都是下级的id,第二次,就变成了,都是上级的id(就是楼上贴的html中的id) 找到原因了 "IE事件冒泡"http://www.javaeye.com/topic/188640取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;可以停止事件继续上传补充一点,Ie的事件传递是从下到上的:事件来源对象->上级对象->上上级对象->.....->body->document->windowNS的事件传递是从上到下:window->document->body->....->事件来源对象实例源码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>event.cancelBubble</title><style><!--* {font:menu}--></style></head><body><span onclick=alert("你好")>点我 <span>再点我</span></span><br><br><span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span></body></html>实例2:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="developer" content="Realazy" /><title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo </title><style type="text/css" media="screen">div * {display:block; margin:4px; padding:4px; border:1px solid white;}textarea {width:20em; height:2em;}</style><script type="text/javascript"> //<![CDATA[ function init(){ var log = document.getElementsByTagName('textarea')[0]; var all = document.getElementsByTagName('div')[0].getElementsByTagName('*'); for (var i = 0, n = all.length; i < n; ++i){ all[i].onmouseover = function(e){ this.style.border = '1px solid red'; log.value = '鼠标现在进入的是: ' + this.nodeName; }; all[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*'); for (var i = 0, n = all2.length; i < n; ++i){ all2[i].onmouseover = function(e){ this.style.border = '1px solid red'; if (e) //停止事件冒泡 e.stopPropagation(); else window.event.cancelBubble = true; log.value = '鼠标现在进入的是: ' + this.nodeName; }; all2[i].onmouseout = function(e){ this.style.border = '1px solid white';}; } }window.onload = init; //]]></script></head><body><h1>Bubble in JavaScript DOM</h1><p>DOM树的结构是:</p><pre><code>UL - LI - A - SPAN</code></pre><div><ul> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li></ul></div><textarea></textarea><p>鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<code>mouseover</code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。</p><div><ul> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li></ul></div><p>如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p></body> 推荐你用火狐 的插件 firebug调试一下吧这样清楚一点 extjs中treepanel下自定义树节点图标 Build Workspaces非常慢如何解决 初学java,为何安装了JDK后,我的hello程序无法执行? SQL语句出错!!! 关于executeBatch()的问题 求助,用sessionScope.item方法得不到页面传递参数值 各位大侠,帮忙解决批量打印的问题,不然快下岗 没有人会在JSP中使用未打成包的类吗? bean中赋值的问题 jsp中文问题 FileInputStream 系统找不到指定文件 急!!! 求读取远程文件的方法
把调用show的代码贴出来看看。
2.修改方法名再试试
3.会不会是A——B——A这种情况
for(int i=0;i<orgs.size();i++){
Object[] org = (Object[])orgs.get(i);
%>
<li style="text-align:left;padding-left:15px" id="root<%=i%>" onclick="return show('root<%=i%>','sub<%=i%>','img<%=i%>','idHidden<%=i%>','pathHidden<%=i%>')">
<a href="#">
<img id="img<%=i%>" src="/html/images/tree/plus.gif"/>
<%=org[1].toString() %>
<input id="idHidden<%=i%>" type="hidden" value="<%=org[0].toString() %>" />
<input id="pathHidden<%=i%>" type="hidden" value="<%=org[2].toString() %>"/>
</a>
<ul id="sub<%=i%>"></ul>
</li>
<%} %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>event.cancelBubble</title>
<style>
<!--
* {font:menu}
-->
</style>
</head><body>
<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br><span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>
</body></html>
实例2:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo </title>
<style type="text/css" media="screen">
div * {display:block; margin:4px; padding:4px; border:1px solid white;}
textarea {width:20em; height:2em;}
</style>
<script type="text/javascript">
//<![CDATA[
function init(){ var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i < n; ++i){
all[i].onmouseover = function(e){
this.style.border = '1px solid red';
log.value = '鼠标现在进入的是: ' + this.nodeName;
};
all[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
} var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i < n; ++i){
all2[i].onmouseover = function(e){
this.style.border = '1px solid red';
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true;
log.value = '鼠标现在进入的是: ' + this.nodeName;
};
all2[i].onmouseout = function(e){
this.style.border = '1px solid white';};
}
}
window.onload = init;
//]]>
</script>
</head>
<body>
<h1>Bubble in JavaScript DOM</h1>
<p>DOM树的结构是:</p>
<pre><code>
UL
- LI
- A
- SPAN
</code></pre>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<textarea></textarea>
<p>鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<code>mouseover</code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。</p>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<p>如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p>
</body>
这样清楚一点