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.
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.
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/
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;
}
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?
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;
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!
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.