给Element添加事件，出现事件重复的奇怪问题
在给Element添加事件的时候，会出现事件重复的情况如下例子:
<html><head><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"><link rel="stylesheet" type="text/css" href="resources/css/xtheme-gray.css"/><link rel="stylesheet" type="text/css" href="resources/css/ux/xslt.css"/><script type="text/javascript" src="js/ext/ext-base-debug.js"></script><script type="text/javascript" src="js/ext/ext-all-debug.js"></script><script type="text/javascript">Ext.onReady(function() { var collapsedLi = Ext.query(".forcollapsed"); Ext.each(collapsedLi, function(item, index) { new Ext.Element(item).on("click", handleClick, // reference to the action handler this ); }) function handleClick(eo, t) { //当点击FTPServerInfo时会执行4次，单击FileInfo 会执行3次 alert(eo.getTarget().innerHTML); }})</script></head><body><div id="container"><div> <ul class="xmlul"> <li id="ext-gen399" class="forcollapsed">VideoFileInfo <ul class="xmlul"> <div> <li class="forcollapsed" id="ext-gen400">SourceElement<table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" class="td1"><span class="xmlSpan">Index:</span>0</td><td align="left" class="td1"><span class="xmlSpan">IfClosed:</span>1</td><td align="left" class="td1"><span class="xmlSpan">FinishFileSeriesNo:</span>1</td><td align="left" class="td1"><span class="xmlSpan">TrimIn:</span>0</td><td align="left" class="td1"><span class="xmlSpan">TrimOut:</span>0</td></tr></tbody></table><ul class="xmlul"><div><li class="forcollapsed" id="ext-gen401">FileInfo<table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" colspan="5" class="td1"><span class="xmlSpan">FileName:</span>Src-V.avi</td></tr><tr><td align="left" class="td1"><span class="xmlSpan">SystemID:</span>DefaultSys</td><td align="left" class="td1"><span class="xmlSpan">StorageID:</span>DefaultSysDisk1Storage1</td><td align="left" class="td1"><span class="xmlSpan">TrimIn:</span></td><td align="left" colspan="2" class="td1"><span class="xmlSpan">TrimOut:</span></td></tr><tr><td align="left" colspan="2" class="td1"><span class="xmlSpan">StorageID:</span>DefaultSysDisk1Storage1</td><td align="left" colspan="3" class="td1"><span class="xmlSpan">FilePath:</span>Local\E:\ActorTest\mz</td></tr><tr><td align="left" colspan="3" class="td1"><span class="xmlSpan">PathID:</span>9995BA56-4E47-4380-AE90-CCF67EFEF1DD</td><td align="left" class="td1"><span class="xmlSpan">PhysicalStatus:</span>20</td><td align="left" class="td1"><span class="xmlSpan">FileLength:</span>0</td></tr></tbody></table> <ul class="xmlul"><div><li class="forcollapsed" id="ext-gen402">FTPServerInfo<table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" class="td1"><span class="xmlSpan">IP:</span></td><td align="left" class="td1"><span class="xmlSpan">Port:</span>21</td><td align="left" class="td1"><span class="xmlSpan">Username:</span></td><td align="left" colspan="2" class="td1"><span class="xmlSpan">Password:</span></td></tr></tbody></table></li></div></ul> </li> </div></ul> </li> </div> </ul> </li> </ul> </div> </div></body></html>
当点击FTPServerInfo时会执行4次，单击FileInfo 会执行3次
这个现象说明在给<li id="ext-gen399" class="forcollapsed">VideoFileInfo
添加时间的时候，它的子元素同时也添加了该事件这样会导致意想不到的结果
解决的方法只能是不将事件添加到li元素
不过还没太闹明白，如果是这样的话，那只要是点击子元素就会触发事件，但为什么只有点击li元素才会触发呢?,
<html><head><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"><link rel="stylesheet" type="text/css" href="resources/css/ux/xslt.css"/><script type="text/javascript" src="js/ext/ext-base-debug.js"></script><script type="text/javascript" src="js/ext/ext-all-debug.js"></script><script type="text/javascript">Ext.onReady(function() { var collapsedLi = Ext.query(".forcollapsed"); Ext.each(collapsedLi, function(item, index) { new Ext.Element(item).on( "click", handleClick // reference to the action handler ); }) function handleClick(eo, t) { alert(eo.getTarget().innerHTML); }})</script></head><body><div id="container"><div><ul class="xmlul"><li id="ext-gen399"><span class="forcollapsed">VideoFileInfo</span> <ul class="xmlul"> <div><li id="ext-gen400"><span class="forcollapsed">SourceElement</span><table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" class="td1"><span class="xmlSpan">Index:</span>0</td><td align="left" class="td1"><span class="xmlSpan">IfClosed:</span>1</td><td align="left" class="td1"><span class="xmlSpan">FinishFileSeriesNo:</span>1</td><td align="left" class="td1"><span class="xmlSpan">TrimIn:</span>0</td><td align="left" class="td1"><span class="xmlSpan">TrimOut:</span>0</td></tr></tbody></table><ul class="xmlul"><div><li id="ext-gen401"><span class="forcollapsed">FileInfo</span><table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" colspan="5" class="td1"><span class="xmlSpan">FileName:</span>Src-V.avi</td></tr><tr><td align="left" class="td1"><span class="xmlSpan">SystemID:</span>DefaultSys</td><td align="left" class="td1"><span class="xmlSpan">StorageID:</span>DefaultSysDisk1Storage1</td><td align="left" class="td1"><span class="xmlSpan">TrimIn:</span></td><td align="left" colspan="2" class="td1"><span class="xmlSpan">TrimOut:</span></td></tr><tr><td align="left" colspan="2" class="td1"><span class="xmlSpan">StorageID:</span>DefaultSysDisk1Storage1</td><td align="left" colspan="3" class="td1"><span class="xmlSpan">FilePath:</span>Local\E:\ActorTest\mz</td></tr><tr><td align="left" colspan="3" class="td1"><span class="xmlSpan">PathID:</span>9995BA56-4E47-4380-AE90-CCF67EFEF1DD</td><td align="left" class="td1"><span class="xmlSpan">PhysicalStatus:</span>20</td><td align="left" class="td1"><span class="xmlSpan">FileLength:</span>0</td></tr></tbody></table><ul class="xmlul"><div><li id="ext-gen402"><span class="forcollapsed">FTPServerInfo</span><table cellspacing="1" cellpadding="4" border="0" bgcolor="#6b78a9" align="center" width="98%" bordercolorlight="#6B78A9" bordercolordark="#6B78A9"><tbody><tr><td align="left" class="td1"><span class="xmlSpan">IP:</span></td><td align="left" class="td1"><span class="xmlSpan">Port:</span>21</td><td align="left" class="td1"><span class="xmlSpan">Username:</span></td><td align="left" colspan="2" class="td1"><span class="xmlSpan">Password:</span></td></tr></tbody></table></li></div></ul></li></div></ul></li></div> </ul> </li></ul></div></div></body></html>
页:
[1]