Home/ Questions/Q 7506359
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T22:14:07+00:00

In my application I create some new elements and append them to the page

  • 0

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
.....

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');
});

This is the generated result in the page (a div contain a img tag and a span tag):

enter image description here

After the page loaded, things get wrong.

If I click the image directly, the click event does not trigger, but the mousedown event does.

If I click the div directly without the image, everything goes well.

It seems that, when I click the image,the click event is not delegated to the div.

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>

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>

Now, both of the two event occur no matter where I click inside the 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?

Update:

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;
}

It just for cross-browser use,and notice that the mousedown event works well anyway.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    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.

    • 0