Click Event Listener catching multiple events

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Click Event Listener catching multiple events

Post 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 :(
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Click Event Listener catching multiple events

Post 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!
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Re: Click Event Listener catching multiple events

Post 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...
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Click Event Listener catching multiple events

Post 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?
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Re: Click Event Listener catching multiple events

Post 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...
Last edited by legend986 on Sun Oct 26, 2008 5:25 pm, edited 1 time in total.
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Click Event Listener catching multiple events

Post 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.
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Re: Click Event Listener catching multiple events

Post 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...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Re: Click Event Listener catching multiple events

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