Page 1 of 1

Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 4:17 pm
by legend986
I am trying to attach a click event listener to the browser by using the following:

Code: Select all

window.addEventListener("click", function() { alert("Event Encountered!"); }, true);
For some reason, when I use this, the browser pops the alert message box three times. I want it to catch just one click event but it ends up giving me more than what I require. Could someone please tell me what mistake I am doing? I have tried even putting false, but that gives me the same result but this time it displays the alert box two times.

Edit: I tried using mousedown and mouseup but it keeps giving me the same result :(

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 4:39 pm
by Chalks
I've not used addEventListener before, but reading the MDC it looks like you should have your third value set to false, not true.
target.addEventListener(type, listener, useCapture);
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture.

EDIT: More reading here!

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 4:42 pm
by legend986
Thank You. Actually, that is the problem, if I use true, it displays thrice and if I use false, it displays twice and I am not understanding why that is happening...

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 4:47 pm
by Chalks
I would guess that the element already has a click event associated with it, and adding the second one makes both click events do the same thing. I ran into this problem with jquery when I was adding event listeners inbetween ajax calls. It ended up adding another event listener without destroying the old one. Check out removeEventListener. That might be part of the problem.

Other than that, I'm out of guesses. Could we see code?

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 4:52 pm
by legend986
Well, I am trying to write a simple firefox extension. Here's the code I am using to test this:

Code: Select all

 
window.addEventListener("load", function() { ffSampleExtension.init(); }, false);
 
var ffSampleExtension = {
    
    init: function() {
        var appcontent = document.getElementById("appcontent");   // browser
        if(appcontent)
          appcontent.addEventListener("DOMContentLoaded", ffSampleExtension.onPageLoad, true);
        var messagepane = document.getElementById("messagepane"); // mail
        if(messagepane)
          messagepane.addEventListener("load", function () { ffSampleExtension.onPageLoad(); }, true);
    },
 
    onPageLoad: function(aEvent) {
        window.top.addEventListener("click", function() { ffSampleExtension.logData(); }, false);
    }
}
 
Thanks. I think I get your point of adding two event Listeners. I will try removing one but I am wondering if that would affect any functionality.

Edit: By the way how do I check for an event listener if it is already present? I mean, I want to add only if it doesn't already exist...

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 5:00 pm
by Chalks
I think we're quickly getting outside of my scope of knowledge. The only other obvious thing that I can find is this:

Code: Select all

         messagepane.addEventListener("load", function () { ffSampleExtension.onPageLoad(); }, true);
All the examples I've recently looked at would have done it like so:

Code: Select all

         messagepane.addEventListener("load", ffSampleExtension.onPageLoad, true);
Here's one example that might help



EDIT:
how do I check for an event listener if it is already present?
I reread the MDC, and it looks like I was wrong on event listeners being duplicated.
https://developer.mozilla.org/En/DOM/Element.addEventListener wrote:If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the removeEventListener method.
EDIT EDIT: if and only if the EventListeners are IDENTICAL the old ones are discarded.

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 5:14 pm
by legend986
Hmm... Seems so... I tried using removeEventListener and then adding but the problem still persists... :(

Edit: I tried making the change you suggested, removing the bracket after onPageLoad but it doesn't seem to help...

Re: Click Event Listener catching multiple events

Posted: Sun Oct 26, 2008 5:27 pm
by legend986
The logData function is something like this:

Code: Select all

 
logData: function() {
        var flag = 1;
        if(flag == 1) {
            var currentTime = new Date();
            data = currentTime.getHours()+":"+currentTime.getMinutes()+":"+currentTime.getSeconds()+"\n";
            ffSampleExtension.writeToFile(data);
            flag = 0;
        }
    },
 
Even now it writes twice to the file (or alerts twice depending on what I am doing inside the writeToFile method). I will try making the flag a global variable. But the problem is it will not register a new event from second time onwards...