В своем приложении я создаю несколько новых элементов и добавляю их на страницу в соответствии с операцией использования,
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, он выглядит примерно так:
<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' в любом случае работает хорошо.