Как смоделировать отключенную кнопку с помощью пользовательского тега кнопки?

Question

Ссылка на jsbin: http://jsbin.com/axevid/2 <- открыть с помощью браузера Webkit (Chrome или Safari)

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

Я использую Javascript MVC. Я думаю, что я видел функцию, которая отключает события, но я забыл, где это было.

РЕДАКТИРОВАТЬ: код должен быть своего рода плагин, который должен работать на всех пользовательских кнопок. Другими словами, я не хочу включать оператор if в каждое связанное событие. Есть идеи? Благодарю.

Answer 1

Когда вы создаете элемент управления, вам также нужно добавить в него прослушиватели событий, которые вы хотите предотвратить ("click" а также "keypress", наверное). Затем в обработчиках вызовите event. stopImmediatePropagation() если вы хотите, чтобы никто не смог увидеть событие.

Например:

btn.addEventListener("click", function(event) {
    if (btn.disabled) {
        event.stopImmediatePropagation();
    }
});

Answer 2

Вы имеете в виду (как я понял из вашего запроса)

$(function() {
$("abutton").each(function() {
if($(this).attr("disabled")) {
e.preventDefault();
return;
});
});

Answer 3

Это будет работать: http://jsbin.com/axevid/3

Я внес изменения в следующую часть:

$(document).delegate('abutton', 'click', function(e){
  if($(this).attr('disabled')){
    e.preventDefault();
    return;
  }
  alert("Custom button");

});