禁用 div 上的属性仍会触发单击事件

Question

我有一个 div，其中有一个图标，我向该 div 添加了禁用属性，并且单击事件仍然会触发。所以我创建了 div 的副本并将其更改为按钮。两者都有点击事件，但点击时按钮不会触发，但 div 会触发。这是为什么，以及如何在单击 div 时停止触发单击事件？我知道我可以在点击事件期间检查禁用属性，但想知道为什么我必须这样做以及为什么禁用属性在 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

<div>没有disabled属性，点击时必须检查是否被禁用。

$('#btn').on('click', function() {

  if (!$(this).prop("disabled"))

  alert("clicked");

});

Answer 2

禁用属性在 上不起作用div。如果您坚持不检查属性，可以使用:not()选择器。

$('#btn:not(.disabled)').on('click', function() {

  alert("clicked");

});

'#btn:not(.disabled)'查找具有 idbtn但不具有disabled类的元素。

Answer 3

您可以使用以下 css 来禁用 div 元素上的单击，因为 div 元素没有禁用属性：

 pointer-events: none;

 cursor: default;

希望这有帮助..谢谢