javascript - evento - onclick jquery html

¿Es posible desactivar onclick sin alterar su función?

Question

La forma que conozco para deshabilitar un evento onclick en un elemento es:

element.onclick = null;

Para permitir:

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

o

element.addEventListener("click", me);

Esto está bien, pero cuando tiene varios elementos, cada uno de los cuales tiene la misma función con diferentes valores de parámetros, se vuelve un poco molesto de usar de esta manera. ¿Hay alguna manera de desactivarlo sin sacrificar la función inicial con sus parámetros?

Quiero mantener la función como está sin tener que configurarlo en nulo o en otra cosa para poder deshabilitarla.

Answer 1

Puedes hacerlo asi

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

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

Funcionará tanto para eventos de clic como para eventos de pulsación de tecla.

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

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

Answer 2

Puedes hacerlo en css.

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

Pro: funciona en todos los elementos HTML.

Con: no impide la acción del teclado

Answer 3

Utilice el atributo deshabilitado para deshabilitar un botón.

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

La ventaja de este método (sobre los "eventos de punteros" sugeridos en una respuesta alternativa) es que no solo le impedirá usar el botón como usuario del mouse, sino que también detendrá las tecnologías de asistencia y cualquier persona que use el teclado.

En JavaScript, puede deshabilitar o habilitar el atributo con:

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

O con jQuery puedes hacer:

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