web-dev-qa-db-fra.com

Désactiver onclick avec CSS :: Possible?

Je voudrais désactiver l'événement onclick avec CSS. Possible?

Disons que j'ai

<div id="btnCopy" class="button" onclick="btnCopy(this);"><img src="copy.png"></div>

et en ajoutant la classe "disabled" 

document.getElementById("btnCopy").className += " disabled";

Je voudrais désactiver l'événement onclick pour cet élément, afin que onclick="btnCopy(this);" ne soit pas actif.

Et en supprimant "disabled" class

document.getElementById("btnCopy").className = 
  document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, '');

cela reviendrait à la normale, donc l'événement onclick sera actif.

javascripthtmlcss
23
Ωmega

Ajoutez du Javascript à votre fonction btnCopy pour vérifier si l'élément de paramètre a la classe disabled ou non.

L'utilisation de CSS pour modifier le comportement de JavaScript n'est pas possible. CSS est destiné au style des éléments HTML, JavaScript est destiné à gérer le comportement des événements et du site. CSS et JavaScript sont deux choses très différentes. La seule chose possible avec CSS est d'empêcher un utilisateur de cliquer sur une entrée (bouton par exemple). Avec la solution CSS, vous ne désactivez pas le code dans l'événement onclick. Vous désactivez uniquement la capacité de l'utilisateur à déclencher l'événement onclick.

Cependant, il existe de nombreuses façons de modifier les éléments d'une page (en utilisant encore plus de JavaScript ou des plugins pour votre navigateur), ce qui peut permettre de cliquer sur le bouton malgré le pseudo-élément CSS. C'est pourquoi l'utilisation de CSS pour ce n'est pas recommandée.

11
Simon Forsberg

Dans certains navigateurs, vous pouvez définir pointer-events: none, mais cela désactive tous les événements de souris, pas seulement les clics. Voir: https://developer.mozilla.org/en/CSS/pointer-events/

25
Richard M

Tu peux le faire.

pointer-events: none;
cursor: default;

plus ici

22
user2591988

C'est hack, mais je suggérerais d'utiliser des pseudo-éléments:

Sur un bouton avec une classe désactivée, vous pouvez créer un pseudo-élément recouvrant le bouton afin qu’il ne puisse pas être cliqué.

Mais il serait plus logique d’utiliser javascript puisque vous l’utilisez déjà pour ajouter et supprimer des classes ...

EDIT: Pas recommandé du tout, mais ici vous allez:

#btnCopy {position:relative;z-index:1;}

.disabled:before {
  content:" ";
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:10;
}
5
Krimo

Si vous utilisez javascript pour ajouter et supprimer une classe, pourquoi ne pas l'utiliser pour activer la désactivation de l'événement click?

2
Jon Taylor

Voici comment Bootstrap le fait.

.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

Vous pouvez simplement garder cursor: not-allowed; et si vous n'avez pas besoin de réinitialiser les styles, supprimez-les _opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;

1
Syed

Vous pouvez utiliser javascript pour désactiver les boutons événement onclick en ajoutant cette ligne de javascript.

var btnCopy = document.getElementById("btnCopy");
btnCopy.className += " disabled";
btnCopy.onclick = null;

La meilleure option est probablement d'utiliser jQuery et de vérifier si btnCopy a la classe 'disabled'.

if(!$('btnCopy').hasClass('disabled')){
   //Add code to copy text here
}

Bonne chance!

0
Jim van der Voort

Si vous souhaitez ajouter ou supprimer la classe "désactivée", vous pouvez également vérifier cette classe dans votre gestionnaire d'événements et ne rien faire. L'élément a la classe désactivée.

0
Litek