是否可以在不改变其功能的情况下禁用 onclick？

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>

这种方法的优点（相对于替代答案中建议的“指针事件”）是它不仅会阻止您作为鼠标用户使用按钮，还会阻止辅助技术和任何使用键盘的人。

在 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>

专业版：它适用于所有 HTML 元素

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

Answer 3

你可以这样做

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

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

它适用于点击事件和按键事件。

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

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