给Element添加事件，出现事件重复的奇怪问题

于 2009-11-06 10:43:16 发布
阅读量495 收藏
点赞数
分类专栏： Ext 文章标签： EXT HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/herrygoon/article/details/83486583
版权
在给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>


[color=blue]当点击FTPServerInfo时会执行4次，单击FileInfo 会执行3次
这个现象说明在给<li id="ext-gen399" class="forcollapsed">VideoFileInfo
添加时间的时候，它的子元素同时也添加了该事件这样会导致意想不到的结果
解决的方法只能是不将事件添加到li元素[/color]
[color=darkred]不过还没太闹明白，如果是这样的话，那只要是点击子元素就会触发事件，但为什么只有点击li元素才会触发呢?[/color], 

<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>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值