Question

我有一个<span>元素可以在点击事件中执行某些操作。

当我禁用它时，使用jQuery：

$("span").attr("disabled", true);

单击span元素时，将继续调用事件处理程序。

我正在Chrome 13中测试。有什么想法吗？

Answer 1

试试这个：

$("span").css("pointer-events", "none");

你可以通过

启用它们

$("span").css("pointer-events", "auto");

Answer 2

disabled属性不是全局属性，只能在表单控件上使用。您可以做的是设置自定义数据属性（可能是data-disabled）并在处理点击事件时检查该属性。

Answer 3

禁用属性的标准行为仅适用于表单元素。尝试取消绑定事件：

$("span").unbind("click");

Answer 4

尝试取消绑定事件。

$("span").click(function(){
alert($(this).text());
    $("span").not($(this)).unbind('click');
});

以下是fiddle

Answer 5

有一个肮脏的把戏，我用过的东西：

我正在使用bootstrap，所以我只是将.disabled类添加到我要禁用的元素中。 Bootstrap处理剩下的事情。

对此表示衷心的欢迎。

在运行时添加课程

$('#element').addClass('disabled');

Answer 6

@click=" canClick ? doClick : void 0"

用户点击但没有任何反应可以满足您

我在vuejs中使用它工作正常

Answer 7

最好的方法是将跨度包装在一个按钮内并禁用该按钮

$("#buttonD").click(function(){
  alert("button clicked");
})

$("#buttonS").click(function(){
  alert("span clicked");
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-success" disabled="disabled" id="buttonD">
    <span>Disabled button</span>
</button>

<br>
<br>

 <span class="btn btn-danger" disabled="disabled" id="buttonS">Disabled span</span>

在SPAN元素上禁用设置属性不会阻止单击事件

7 个答案: