单击事件未在chrome中委派 [英] click Event is not delegated in chrome
问题描述
在我的应用程序中，我创建了一些新元素，并根据use的操作将它们附加到页面上，
In my application I create some new elements and append them to the page according to use's operation,
var dv=document.createElement('div');
//set styles for the dv
.....
之后创建这个div元素，我将添加一些事件：
After create this div element,I will add some event to it:
MyLib.Event.addDomListener(dv,'click',function(e){
console.info('click');
});
MyLib.Event.addDomListener(dv,'mousedown',function(e){
console.info('mousedown');
});
这是页面中生成的结果（div包含img标签和span标签）：
This is the generated result in the page(a div contain a img tag and a span tag):
加载页面后，出现问题。
After the page loaded,things get wrong.
如果我直接点击图片，则点击事件不会触发，但'mousedown'事件确实如此。
If I click the image directly,the 'click' event does not trigger,but the 'mousedown' event does.
如果我在没有图像的情况下直接点击div，一切顺利。
If I click the div directly without the image,everything goes well.
看来，当我点击图片时，'click'事件不会委托给div。
It seems that,when I click the image,the 'click' event is not delegated to the div.
然后我通过chrome develop复制最终生成的代码工具，它是这样的：
But then I copy the final generated code through chrome develop tool,it is something like this:
<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文件，并添加事件脚本：
Then I copy it to a new .html file,and add the event script:
<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中点击哪里，都会发生这两个事件。
Now,both of the two event occur no matter where I click inside the div.
我真的很疯狂，有什么问题？我没有专门为生成的div做任何事情。
I am really crazy,what is the problem? I do not do anything specially for the generated div.
所以我想知道你们中是否有人遇到过这个问题？或者在这种情况下会发生这种异常？
So I want to know if any of you have meet this problem? Or In which case this kind of exception can happen?
更新：
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;
}
它仅供跨浏览器使用，并注意'mousedown'事件无论如何都运行良好。
It just for cross-browser use,and notice that the 'mousedown' event works well anyway.
推荐答案
我注意到你在两个例子之间使用了两种不同的方法来附加监听器。
I notice that you are using two different methods of attaching the listener between your two examples.
最好通过尽可能密切复制事物来隔离可能的原因。尝试坚持使用相同的方法来连接两个测试的监听器，这可能会让你有所了解。
It is always best practice to isolate the possible causes by making things as closely duplicated as possible. Try sticking to the same method of attaching the listener for both tests and this might lead you to some insight.
另外，我不知道MyLib是什么，但如果它是某种JS库，问题可能出在那个库中。尝试使用本机JS方法或不同的库。
Also, I don't know what "MyLib" is, but if it is some sort of JS library, the problem could be in that library. Try using the native JS methods or a different library.
这篇关于单击事件未在chrome中委派的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
