Удалить прослушиватель событий в JavaScript - PullRequest
Новая
       20

Удалить прослушиватель событий в JavaScript

5 голосов
/ 12 января 2012

Я добавляю прослушиватель событий к элементу: 

/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){
    if (element.addEventListener){
        element.addEventListener(type, handler, false);
    }else{
        element.attachEvent("on"+type, handler);
    }
}

window.addEventListener("load", function() {
    var els = getElementsByClassName('name', 'img');
    var elsnum = els.length;
    if(elsnum) //found
    {
        var i = 0;
        for(i=0; i < elsnum; i++)
        {
            var the_els = els[i];
            AttachEvent(the_els, "click", myfunction); 
        }
    }
}, false);

Позже в myfunction я хочу снова удалить обработчик, чтобы избежать повторных нажатий: 

function myfunction(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;  

    //more code
    //...

    //remove click handler
    target.removeEventListener('click', e, false);

    //more code
    //...
}

Однако слушатель события не удаляется.Когда я нажимаю на один из элементов, код myfunction выполняется снова.Как удалить прослушиватель событий, чтобы предотвратить повторный щелчок по элементу, по которому щелкнули?

PS: я не использую jQuery.

Ответы [ 3 ]

8 голосов
/ 12 января 2012

Я считаю, что вы почти у цели, но вы должны передать слушатель в removeEventListener, а не само событие. Так что попробуйте: 

target.removeEventListener('click', myFunction, false);
5 голосов
/ 12 января 2012

Использовать element.removeEventListener(type, listener, useCapture) Не забудьте использовать это для того же элемента и дать ему те же параметры, что и для добавления.

Один отличный способ закодировать это - создать функцию, хранящуюслушатель подробно описывает переменную, имитируя, например, как setTimeout(), и добавляя это к прототипу элемента.Вот пример функции. 

HTMLElement.prototype.eventListener=
function(type, func, capture){
   if(typeof arguments[0]=="object"&&(!arguments[0].nodeType)){
      return this.removeEventListener.apply(this,arguments[0]);
   }
   this.addEventListener(type, func, capture);
   return arguments;
}

Это добавит метод ко всем узлам HTML, которые уже могут принимать списки событий, и позволит вам сделать это. 

var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove
2 голосов
/ 12 января 2012

http://www.quirksmode.org/js/events_advanced.html

Чтобы удалить обработчик событий, используйте метод removeEventListener().

Также см. http://help.dottoro.com/ljahxbsx.php

object.removeEventListener (eventName, listener, useCapture);

listener - обязательно.Ссылка на функцию обработчика событий для удаления.Вам нужно передать, какого слушателя вы хотите удалить.

...