Включить / отключить события элементов DOM с помощью JS / jQuery

Question

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

У меня есть теги в моем DOM, и я связал с ними несколько событий с помощью jQuery ..

var a = $('<a>').click(data, function() { ... })

Иногда я хотел бы отключить некоторые из этих элементов, что означает, что я добавляю к нему CSS-класс «отключен», и я хотел бы удалить все события, чтобы больше не вызывать никаких событий. Я создал класс под названием «Кнопка», чтобы решить, что

var button = new Button(a)
button.disable()

Я могу удалить все события из объекта jQuery с помощью $ .unbind. Но я также хотел бы иметь противоположную особенность

button.enable()

, который связывает все события со всеми обработчиками обратно в элемент ИЛИ ЖЕ может быть, есть функция в jQuery, которая на самом деле теперь, как это сделать?!

Мой класс кнопок выглядит примерно так:

Button = function(obj) {
  this.element = obj
  this.events = null

  this.enable = function() {
    this.element.removeClass('disabled')
    obj.data('events', this.events)
    return this
  }

  this.disable = function() {
    this.element.addClass('disabled')
    this.events = obj.data('events')
    return this
  }
}

Есть идеи? Особенно эта функция повторного связывания должна быть доступна после отключения -> enable

var a = $('<a>').click(data, function() { ... })

Я нашел эти источники, которые не работали для меня: http://jquery -howto.blogspot.com / 2008/12 / как к disableenable-элементного-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> Я не устанавливаю события в классе кнопок

Ценю вашу помощь.

Answer 1

$("a").click(function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    return false;
});

Возвращение false очень важно.

Или вы можете написать свои собственные функции включения и отключения, которые делают что-то вроде:

function enable(element, event, eventHandler) {
    if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking
        element.bind(event, element.data()[event]);

    }
    else (!element.data()[event] && eventHandler) {
        element.bind(event, element.data()[event]);
        element.data({event: eventHandler}); //We save the event handler for future enable() calls
    }
}

function disable(element, event) {
    element.unbind().die();
}

Это не идеальный код, но я уверен, что вы поняли основную идею. Восстановите старый обработчик событий из данных DOM элемента при вызове enable. Недостатком является то, что вам придется использовать enable () для добавления любого прослушивателя событий, который может потребоваться отключить () d. В противном случае обработчик событий не будет сохранен в данных DOM и не может быть восстановлен с помощью enable () снова. В настоящее время нет надежного способа получить список всех слушателей событий элемента; это сделало бы работу намного легче.

Answer 2

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

• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
• http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

Вот почему вы можете просто проверить класс (ы) на выбранном элементе и действовать соответственно.И вы сможете даже повторно их очистить, только изменив классы тега.

PS внимательно прочитайте ссылки, чтобы позже вы могли объяснить это другим.Делегирование событий - очень важная техника.

Answer 3

Я бы пошел на это с другим подходом:

<a id="link1">Test function</a>
<a id="link2">Disable/enable function</a>

<script type="text/javascript">
  $(function() {
      // this needs to be placed before function you want to control with disabled flag
      $("#link1").click(function(event) {
          console.log("Fired event 1");
          if ($(this).hasClass('disabled')) {
              event.stopImmediatePropagation();
          }
      });

      $("#link1").click(function() {
          console.log("Fired event 2");
      });

      $("#link2").click(function() {
          $("#link1").toggleClass("disabled");
      });
  });
</script>

Возможно, это не то, что вам нужно, поскольку это может повлиять и на другие функции, связанные с этим событием позже. Альтернатива может состоять в том, чтобы изменить сами функции так, чтобы они выглядели так:

$("#link1").click(function(event) {
    console.log("Fired event 1");
    if ($(this).hasClass('disabled')) {
       return;
    }

    // do something here
});

если это вариант.

Answer 4

Вы можете использовать <input type="button">, а затем использовать $("#buttonID").addAttr('disabled', 'disabled'); и $("#buttonID").removeAttr('disabled');.Отключение и включение будут обрабатываться браузером.Вы все еще можете изменить его стиль, чтобы он выглядел как якорь, удалив фоны и границы для кнопки.Имейте в виду, что некоторые поля и отступы могут по-прежнему мешать вам в некоторых браузерах.