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标记和范围标记）：

enter image description here

加载页面后，出现错误。

如果我直接点击图片，'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; 
}

它只是为跨浏览器的使用，并注意“鼠标按下”事件行之有效反正。

来源

2012-02-17 hguser

'MyLib.Event.addDomListener（）'做了什么（请显示代码）？ – nnnnnn 2012-02-17 07:00:38

@nnnnnn：我更新它。 – hguser 2012-02-17 10:35:33

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

最好的做法是通过尽可能接近地重复来隔离可能的原因。尝试坚持使用两种测试附加侦听器的方法，这可能会引导您深入了解。另外，我不知道“MyLib”是什么，但是如果它是某种类型的JS库，问题可能出现在该库中。尝试使用本地JS方法或不同的库。

来源

2012-02-17 07:40:44

，我更新我的帖子。请检查一下。 – hguser 2012-02-17 10:32:53

您应该确认该事件实际上正在附加。这将帮助您确定问题是附加事件还是事件传播之一。我建议在“元素”面板中试用Chrome的“事件监听器”选项卡。（http：// stackoverflow。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

Click事件在Chrome

回答

相关问题