Click事件在Chrome
委托在我的应用程序创建一些新的元素,并将它们添加到根据使用的操作页面,Click事件在Chrome
var dv=document.createElement('div');
//set styles for the dv
.....
创建后,这个div元素,我将一些事件添加到它:
MyLib.Event.addDomListener(dv,'click',function(e){
console.info('click');
});
MyLib.Event.addDomListener(dv,'mousedown',function(e){
console.info('mousedown');
});
这是在页面生成的结果(一个div包含img标记和范围标记):
加载页面后,出现错误。
如果我直接点击图片,'click'事件不会触发,但'mousedown'事件会发生。
如果我没有图像直接点击div,一切都会顺利。
看来,当我点击图片时,'click'事件没有委托给div。
但后来我通过复制铬最终生成的代码开发工具,它是这样的:
<div id="con" style="position: absolute; border:1px solid red; left: 10px; top: 10px; width: 20px; height: 34px; ">
<img src="http://localhost/MAPALINE/IMAGES/MARKER_LARGE.PNG" id="ov" style="left: 0px; top: 0px; position: relative; width: 20px; height: 34px; ">
<span style="text-align: center; left: 0px; top: 0px; width: 20px; position: absolute; ">1</span>
</div>
然后,我把它复制到一个新的.html文件,并添加事件脚本:
<script type="text/javascript">
var con=document.getElementById('con');
con.addEventListener('click',function(e){
console.info('click');
},false);
con.addEventListener('mousedown',function(e){
console.info('mousedown');
},false);
</script>
现在,无论我在哪里点击div,这两个事件都会发生。
我真的很疯狂,是什么问题?我没有专门为生成的div做任何事情。
所以我想知道你们有没有遇到这个问题?或者在这种情况下会发生这种异常?
更新:
Mylib.Event.addDomListener=function(target,evt,handler){
if(target.addListener){
target.addListener(evt,handler,false);
}else if(target.atttchEvent){
target.attachEvent('on'+evt,handler);
}else
#~ target['on'+evt]=handler;
}
它只是为跨浏览器的使用,并注意“鼠标按下”事件行之有效反正。
我注意到您正在使用两种不同的方法在两个示例之间附加侦听器。
最好的做法是通过尽可能接近地重复来隔离可能的原因。尝试坚持使用两种测试附加侦听器的方法,这可能会引导您深入了解。另外,我不知道“MyLib”是什么,但是如果它是某种类型的JS库,问题可能出现在该库中。尝试使用本地JS方法或不同的库。
,我更新我的帖子。请检查一下。 – hguser 2012-02-17 10:32:53
您应该确认该事件实际上正在附加。这将帮助您确定问题是附加事件还是事件传播之一。我建议在“元素”面板中试用Chrome的“事件监听器”选项卡。 (http:// *。com/a/7122245/867944)或可能在Firefox中使用Firebug的Eventbug扩展(http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug) – 2012-02-19 06:25:37
它被附加在Chrome中。但它仍然不起作用。无论如何添加这个'MyLib.addDomListener(dv,'mousedown',function(e){e.cancelBubble = true; e.stopPropagation && e.stopPagagation();});'。点击事件将起作用。 – hguser 2012-02-20 05:15:56
'MyLib.Event.addDomListener()'做了什么(请显示代码)? – nnnnnn 2012-02-17 07:00:38
@nnnnnn:我更新它。 – hguser 2012-02-17 10:35:33