• 全部
  • 问答

带CHECKBOX的树型目录求助!为什么点击某个第N层次的节点会执行N次ONMOUSEOVER函数?

不胜人生一场醉 海南移动 项目总监  2004-09-28 02:20:11
<HTML>
<HEAD>
<TITLE> emu's test of simple tree</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var head="display:''"
img_close=new Image()
img_close.src="/sysManage/images/f.gif"
img_open=new Image()
img_open.src="/sysManage/images/fo.gif"
img3=new Image()
img3.src="/sysManage/images/e.gif";

var elment = img_close.src;
function checkSelect()
{
var elm = event.srcElement.parentNode;
checkChildrenRecurve(elm);
checkRootRecurve(document.getElementById("root"));
}
function checkChildrenRecurve(elm)
{
var li = elm.parentNode;
var ul = li.lastChild;
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++)
{
lis[i].firstChild.firstChild.checked=elm.firstChild.checked;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkRootRecurve(ul)
{
if (ul.tagName != "UL")
{
ul.parentNode.firstChild.firstChild.allChecked = ul.parentNode.firstChild.firstChild.checked;
ul.parentNode.firstChild.firstChild.allUnChecked = !ul.parentNode.firstChild.firstChild.checked;
return;
}
var lis = ul.children;
var allChecked = true;
var allUnChecked = true;
for (var i=0;i<lis.length;i++)
{
checkRootRecurve(lis[i].lastChild);
allChecked = allChecked && lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allChecked;
allUnChecked = allUnChecked && !lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allUnChecked;
}
ul.parentNode.firstChild.firstChild.allChecked=allChecked;
ul.parentNode.firstChild.firstChild.allUnChecked=allUnChecked;
if (allChecked || allUnChecked)
{
ul.parentNode.firstChild.firstChild.checked=allChecked;
ul.parentNode.firstChild.firstChild.disabled=false;
ul.parentNode.firstChild.childStatus=false;
}
else
{
ul.parentNode.firstChild.firstChild.disabled=true;
ul.parentNode.firstChild.childStatus=true;
ul.parentNode.firstChild.firstChild.checked=true;

}
}

function enableFirstChild()
{
this.childStatus = this.firstChild.disabled;
this.firstChild.disabled=false;
}
function recoverFirstChild()
{
this.firstChild.disabled = this.childStatus;
}
function init()
{
var elms = document.getElementsByTagName("INPUT");
for (var i=0;i<elms.length;i++)
elms[i].onclick=checkSelect;
var elms = document.getElementsByTagName("SPAN");
for (var i=0;i<elms.length;i++)
{
elms[i].onmouseover=enableFirstChild;
elms[i].onmouseout=recoverFirstChild;
}
var elms = document.getElementsByTagName("LI");
for (var i=0;i<elms.length;i++)
elms[i].onclick=onMouseDown;
}
function onMouseDown()
{
if(!document.all)return;
var eventObj = event.srcElement;

if(eventObj.tagName=="LI")
{
//判断是否存在子节点

var sSrc = eventObj.style.listStyleImage;
//alert(sSrc);
//alert(eventObj.innerHTML);
//alert(eventObj.outerHTML);
if(sSrc.indexOf("e.gif") >= 0)return;
if(sSrc.indexOf("f.gif") < 0)return;
//if(sSrc.indexOf("f.gif") < 0 && sSrc.indexOf("fo.gif")<0)return;
var nOffIndex = 3;
var srcIndex = eventObj.sourceIndex;
var nested = document.all[srcIndex + nOffIndex];

if(nested.tagName!="UL")
{
nested = document.all[srcIndex + 1];
}

if (nested.style.display=="none")
{
nested.style.display="block";
eventObj.style.listStyleImage = "url(fo.gif)";
}
else
{
nested.style.display="none";
eventObj.style.listStyleImage = "url(f.gif)";
}
}
else if(eventObj.tagName == "input" )
{//相应节点的点击
alert("test");
// var nChnlId = parseInt(eventObj.name);
// if(!isNaN(nChnlId))
// {
// onClickChannel(nChnlId);
// }
}
}

</SCRIPT>
<style TYPE="text/css">
LI {list-style-image:URL(e.gif)}
#DIRECTORY{list-style-image:URL(f.gif)}
</style>
</HEAD>

<BODY onload="init()">
<div>
<span><input type=checkbox></span>0
<UL id=root>
<LI style="list-style-image:URL(f.gif)"><span><input type=checkbox></span>1
<UL style="display:none">
<LI style="list-style-image:URL(f.gif)"><span><input type=checkbox></span>11
<UL style="display:none">
<LI style="list-style-image:URL(f.gif)"><span><input type=checkbox></span>111
<UL style="display:none">
<LI><span><input type=checkbox></span>1111
<LI><span><input type=checkbox></span>1112
</UL>
<LI><span><input type=checkbox></span>112
</UL>
<LI style="list-style-image:URL(f.gif)"><span><input type=checkbox></span>12
<UL style="display:none">
<LI><span><input type=checkbox></span>121
<LI><span><input type=checkbox></span>122
</UL>
</UL>
</UL>
</div>
</body>
</html>
...全文
113 点赞 收藏 4
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
你可以把onmouseover看成是函数吗
回复
mind_1220 2004-09-28
要是Onmouseover就太夸张了。/
回复
不过什么事件都是执行n次,根目录不算,第一层执行一次,第二层执行两次,第三层执行三次,点击第一层可顺利收缩和展开,点击第二层时执行了两次,第一次展开,第二层就收缩了
回复
孟子E章 2004-09-28
是onclick吧,他是要遍历所有上层的节点
回复
相关推荐
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2004-09-28 02:20
社区公告
暂无公告