在我的应用程序中,我创建了一些新元素,并根据use的操作将它们附加到页面上,
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标签和span标签):
页面加载后,出现问题。
如果我直接点击图片,“点击”事件不会触发,但“mousedown”事件会触发。
如果我在没有图像的情况下直接点击div,一切顺利。
似乎当我点击图片时,'click'事件不会委托给div。
然后我通过chrome develop工具复制最终生成的代码,它是这样的:
<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;
}
仅供跨浏览器使用,请注意'mousedown'事件无论如何都能正常运行。
答案 0 :(得分:0)
我注意到你在两个例子之间使用了两种不同的方法来附加监听器。
最好通过尽可能密切复制事物来隔离可能的原因。尝试坚持使用相同的方法来连接两个测试的监听器,这可能会让你有所了解。
另外,我不知道“MyLib”是什么,但如果它是某种JS库,问题可能出在那个库中。尝试使用本机JS方法或不同的库。