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

Question

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

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

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

EDIT : код должен быть своего рода плагином, который должен работать на всех пользовательских кнопках. Другими словами, я не хочу включать оператор if в каждое связанное событие. Есть идеи? Спасибо.

Answer 1

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

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

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

});

Answer 2

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

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

Answer 3

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

Например:

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