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

herry

浏览: 153375 次
性别:
来自: 北京

最近访客更多访客>>

zuquanbin

atianchen

xiejg

gstszwx11

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT HTML

在给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>

分享到：

多层嵌套 dl dt dd 的例子 | Ext + struts2的方式，如何传递数组到后台

2009-11-06 10:43
浏览 1820
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

二十三种设计模式【PDF版】: GoF 的设计模式表面上好象也是一种具体的"技术"，而且新的设计模式不断在出现，设计模式自有其自己的发展轨道，而这些好象和 J2EE .Net 等技术也无关！实际上，GoF 的设计模式并不是一种具体"技术",它讲述的是...

实时监控体系：基于Prometheus的API性能指标可视化方案.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

5个提升DeepSeekAPI生成质量的调参技巧，开发者必看！.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

ACM动态规划模板-区间修改线段树问题模板: ACM动态规划模板-区间修改线段树问题模板

深度解析C语言调试技巧：VSCode+GDB实战排错指南.pdf: # 踏入C语言的奇妙编程世界在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！

10个高效调用DeepSeekAPI的技巧：从请求优化到缓存策略.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

基于Python语言的PersonRelationKnowledgeGraph设计源码: 本项目为Python语言开发的PersonRelationKnowledgeGraph设计源码，总计包含49个文件，涵盖19个.pyc字节码文件、12个.py源代码文件、8个.txt文本文件、3个.xml配置文件、3个.png图片文件、2个.md标记文件、1个.iml项目配置文件、1个.cfg配置文件。该源码库旨在构建一个用于表示和查询人物关系的知识图谱系统。

成本优化指南：通过Token计算模型将API费用降低57%的秘诀.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

大华智能物联平台，的对接其他接口的API,可以获得视频拉流的flv/hls/rstp 的拉流地址，demo项目为springBoot项目，可以通过摄像头的视频通道，获取到实时拉流的uRl: rtsp实时预览接口URL:/evo-apigw/admin/API/MTS/Video/StartVideo HLS、FLV、RTMP实时预览接口方式 :接口URL/evo-apigw/admin/API/video/stream/realtime 参数名必选类型说明 data true string Json串 +channelId true string 视频通道编码 +streamType true string 码流类型：1=主码流, 2=辅码流，3=辅码流2 +type true string 协议类型：hls,hlss,flv,flvs,ws_flv,wss_flv,rtmp hls:http协议，m3u8格式，端口7086; hlss:https协议，m3u8格式，端口是7096; flv:http协议，flv格式,端口7886; flvs:https协议，flv格式,端口是7896; ws_flv:ws协议，flv格式,端口是7886; wss_flv:wss协议，flv格式,端口是7896; rtmp:rtmp协议,端口是1975;

Simulink永磁风机飞轮储能系统二次调频技术研究：频率特性分析与参数优化,Simulink永磁风机飞轮储能二次调频技术：系统频率特性详解及参数优化研究参考详实文献及两区域系统应用,simulink: Simulink永磁风机飞轮储能系统二次调频技术研究：频率特性分析与参数优化,Simulink永磁风机飞轮储能二次调频技术：系统频率特性详解及参数优化研究参考详实文献及两区域系统应用,simulink永磁风机飞轮储能二次调频，系统频率特性如下，可改变调频参数改善频率。参考文献详细，两区域系统二次调频。 ,核心关键词： 1. Simulink 2. 永磁风机 3. 飞轮储能 4. 二次调频 5. 系统频率特性 6. 调频参数 7. 改善频率 8. 参考文献 9. 两区域系统以上关键词用分号（;）分隔，结果为：Simulink;永磁风机;飞轮储能;二次调频;系统频率特性;调频参数;改善频率;参考文献;两区域系统。,基于Simulink的永磁风机与飞轮储能系统二次调频研究：频率特性及调频参数优化

MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照展示,MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照图: MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照展示,MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照图展示,MATLAB驱动防滑转模型ASR模型 ASR模型驱动防滑转模型 ?牵引力控制系统模型选择PID控制算法以及对照控制算法，共两种控制算法，可进行选择。选择冰路面以及雪路面，共两种路面条件，可进行选择。控制目标为滑移率0.2，出图显示车速以及轮速对照，出图显示车辆轮胎滑移率。模型简单，仅供参考。 ,MATLAB; ASR模型; 防滑转模型; 牵引力控制系统模型; PID控制算法; 对照控制算法; 冰路面; 雪路面; 控制目标; 滑移率; 车速; 轮速。,MATLAB驱动的ASR模型：PID与对照算法在冰雪路面的滑移率控制研究

芯片失效分析方法介绍 -深入解析芯片故障原因及预防措施.pptx: 芯片失效分析方法介绍 -深入解析芯片故障原因及预防措施.pptx

4131_127989170.html: 4131_127989170.html

PostgreSQL自动化部署与优化脚本：智能化安装、安全加固与监控集成: 内容概要：本文提供了一个全面的PostgreSQL自动化部署解决方案，涵盖智能环境适应、多平台支持、内存与性能优化以及安全性加强等重要方面。首先介绍了脚本的功能及其调用方法，随后详细阐述了操作系统和依赖软件包的准备过程、配置项的自动生成机制，还包括对实例的安全性和监控功能的强化措施。部署指南给出了具体的命令操作指导，便于新手理解和执行。最后强调了该工具对于不同硬件条件和服务需求的有效应对能力，特别是针对云计算环境下应用的支持特点。适合人群：对PostgreSQL集群运维有一定基础并渴望提高效率和安全性的数据库管理员及工程师。使用场景及目标：本脚本能够帮助企业在大规模部署时减少人工介入时间，确保系统的稳定性与高性能，适用于各类需要稳定可靠的数据库解决方案的企业或机构，特别是在大数据量和高并发事务处理场合。其他说明：文中还提及了一些高级功能如自动备份、流复制等设置步骤，使得该方案不仅可以快速上线而且能满足后续维护和发展阶段的要求。同时提到的技术性能数据也为用户评估其能否满足业务需求提供了直观参考。

房地产开发合同[示范文本].doc: 房地产开发合同[示范文本].doc

成本优化实战：DeepSeekAPI的Tokens计算与计费策略拆解.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

安全必读：DeepSeek接口调用中的数据加密与合规实践.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

工程技术承包合同[示范文本].doc: 工程技术承包合同[示范文本].doc

蓝桥杯开发赛作品源码【基于C语言】: 蓝桥杯开发赛【作品源码】

深度解析DeepSeek语义分析API：实现情感分析与意图识别的进阶技巧.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

<a>bbbbb</a>

Ext + struts2的方式，如何传递数组到后台

如何解决Ext中 中文乱码的问题

如何构建动态的Grid的列

如何设置自定义tools的可见与非可见(panel,grid等)

如何移除某个监听器

Ext中如何展现复杂的xml文件

Ext中Grid加载数据完成后自动选择第一行

最近访客更多访客>>

如何解决Ext中中文乱码的问题