Question

我知道禁用元素上的onclick事件的方式是：

element.onclick = null;

要启用：

element.onclick = function(){
   // something
};

或

element.addEventListener("click", me);

这很好，但是当您有多个元素时-每个元素具有相同的功能且参数值不同-使用这种方式会有点烦人。有没有一种方法可以禁用它而不牺牲其参数的初始功能？

我想保持该功能不变，而不必将其设置为null或其他禁用功能。

Answer 1

使用disabled属性来禁用按钮。

<button onclick="alert('clicked')">Enabled</button>
<button onclick="alert('clicked')" disabled>Disabled</button>

此方法的优点（相对于替代答案中建议的“指针事件”）是它不仅会阻止您以鼠标用户的身份使用按钮，而且还会停止辅助技术以及任何使用键盘的人。 / p>

在JavaScript中，您可以通过以下方式禁用或启用该属性：

el.disabled = true;   // Disable.
el.disabled = false;  // Enable.

或者使用jQuery，您可以执行以下操作：

$('button').prop('disabled', true);   // Disable.
$('button').prop('disabled', false);  // Enable.

Answer 2

您可以在CSS中完成此操作。

<button onclick="alert('clicked')">Can click</button>
<button onclick="alert('clicked')" style="pointer-events: none;">Cannot click</button>

Pro：它适用于所有HTML元素

缺点：它不会阻止键盘操作

Answer 3

您可以这样做

<button onclick="false && alert('clicked')">Try Click (Disable)</button>

<button onclick="true && alert('clicked')">Try Click (Enable)</button>

它同时适用于click事件和keypress事件。

<button onclick="false && alert('clicked')">Try Click (Disable)</button>

<button onclick="true && alert('clicked')">Try Click (Enable)</button>