在我的应用程序中,我创建了一些新元素,并根据用户的操作将其添加到页面中,

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标签):



页面加载后,出现错误。

如果我直接单击图像,则不会触发“ click”事件,但会触发“ mousedown”事件。

如果我直接单击div而没有图像,则一切正常。

看来,当我单击图像时,“ click”事件并未委派给div。

但是然后我通过chrome开发工具复制最终生成的代码,它是这样的:

<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”事件都运行良好。

最佳答案

我注意到您正在使用两种不同的方法在两个示例之间附加侦听器。

始终最好的做法是通过使事物尽可能重复来隔离可能的原因。尝试对两种测试都坚持使用附加侦听器的相同方法,这可能会使您获得一些见识。

另外,我不知道“ MyLib”是什么,但是如果它是某种JS库,则问题可能出在该库中。尝试使用本机JS方法或其他库。

09-25 22:25
查看更多