1

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
hguser
  • 35,079
  • 54
  • 159
  • 293

1 Answers1

0

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.

DG.
  • 3,417
  • 2
  • 23
  • 28
  • You should verify that the event is actually being attached. That will help you figure out if the problem is one of attaching the event or one of event propagation. I suggest trying Chrome's "Event Listeners" tab in the "Elements" panel. ( http://stackoverflow.com/a/7122245/867944 ) or possibly in Firefox using the Eventbug extension to Firebug ( http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug ) – DG. Feb 19 '12 at 06:25
  • It is attached in the chrome. But it does not work still. Howver if I add this `MyLib.addDomListener(dv,'mousedown',function(e){e.cancelBubble=true;e.stopPropagation && e.stopPropagation();});`.The click event will work. – hguser Feb 20 '12 at 05:15
  • I want to know why the mouse down prevent the click ? – hguser Feb 20 '12 at 14:29
  • Sometimes its better to find a work-around, skip the mystery, and just move on. – DG. Feb 20 '12 at 15:35