Как определить событие, которое изменяет элемент, который имеет другое событие? - PullRequest
Новая
       6

Как определить событие, которое изменяет элемент, который имеет другое событие?

1 голос
/ 17 февраля 2012

Извиняюсь за смутное название, это сложно объяснить в строке ...

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

Однако, реализуя это, я обнаружил, что событие, определенное для этого второго состояния, запускается автоматически после срабатывания первого состояния, как если бы «щелчок» сохранялся после вызова функции и запускал второе событие. *

Вот jsFiddle

Один щелчок должен показать журнал «переход к« foo »», а второй щелчок должен показать журнал «переход к« bar »», но если вы попробуете это, вы увидите, что оба события запущены.

Как я могу это остановить?

Редактировать : Спасибо Димитру за помощь - 

var action = ((this.retrieve('action', 'foo') != this.getProperty('data-action')) ? 'bar' : 'foo' );
if (action == 'foo') {
    console.log('executing "foo"');
    this.store('action', 'bar');
}
else {
    console.log('executing "bar"');
    this.store('action', 'foo');
}

Ответы [ 2 ]

2 голосов
/ 17 февраля 2012

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

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

$(document.body).addEvents({
    'click:relay([data-action=foo])': function() {
        this.store("action", ((this.retrieve("action") || this.get("data-action")) === 'foo') ? 'bar' : 'foo');
        this.set("html", 'State + ' + this.retrieve("action"));
    }
});
2 голосов
/ 17 февраля 2012

Хорошая ситуация:)

Я видел, что изменение порядка объявления обработчиков событий решает проблему для первого клика (и откладывает его для следующих).

И, я думаю, что нет проблем с Mootools: вы нажимаете кнопку, событие всплывает DOM к телу, тело проверяет все свои события присоединения (делегированные, в вашем случае) и останавливается сначалапотому что он находит совпадение для [data-action="bar"].И связанная функция выполняется.Теперь тело продолжает проверять другие совпадения делегирования (у него нет причин останавливаться!) И находит второе совпадение [data-action="foo"] снова.

Боюсь, вы не сможете избежать этого без использования какого-либо флага /переменная состояния или задержка выполнения функции.Я думаю, что последнее является лучшим или, по крайней мере, самым кратким решением (если применимо, я не знаю, может ли задержка вызвать у вас проблемы).Если вы немного задерживаете выполнение функции (в мс), вы просто перепрыгиваете через проверку события делегирования.Демоверсия здесь .

...