Отключить атрибут на div все равно будет вызывать событие click

Question

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

Я знаю, что могу проверить наличие атрибута disabled во время события click, но удивляюсь, почему я должен это сделать и почему отключенный не работает на div

$('#btn').on('click', function() {
  alert("clicked");
});

$('#btn1').on('click', function() {
  alert("clicked");
});

#btn {
  cursor: pointer;
}

#btn[disabled] {
  cursor: not-allowed;
}

#btn1 {
  cursor: pointer;
}

#btn1[disabled] {
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="btn" class="disabled" disabled>
  <i class="fa fa-plus"></i>
</div>

<button id="btn1" class="fa fa-undo" disabled>
click
</button>

Answer 1

Вы можете использовать следующие css, чтобы отключить щелчок по элементу div, поскольку у элемента div нет атрибута disabled:

 pointer-events: none;
 cursor: default;

Надеюсь, это поможет .. спасибо

Answer 2

Атрибут disabled не работает на div. Если вы настаиваете на том, чтобы не проверять атрибут, вы можете использовать селектор :not().

$('#btn:not(.disabled)').on('click', function() {
  alert("clicked");
});

'#btn:not(.disabled)' ищет элементы с идентификатором btn и без класса disabled.

Answer 3

<div> не имеет свойства disabled, необходимо проверить, отключено ли оно при нажатии.

$('#btn').on('click', function() {
  if (!$(this).prop("disabled"))
  alert("clicked");
});