<style type="text/css">
.hilite {
color:green;
font-size: 1.5em;
font-weight:bold;
}
.autosize {width: auto; height: auto;}
ul {background-color: lightblue; height: 24px;}
li {background-color: pink; width: 300px; height: 24px; font-weight: bold; font-size: 1.5em;}
</style>
La page Web a mis en surbrillance le texte sur lequel l'utilisateur passera la souris pour obtenir une info-bulle définissant une terminologie. Cette partie fonctionne et j'ai appris à le faire avec la délégation d'événements qui réutilise l'écouteur d'événements, j'ai donc besoin d'un seul de chaque type d'écouteur.Re-ajouter des écouteurs d'événement après avoir supprimé - Javascript
J'essaie d'utiliser des entrées radio pour donner à l'utilisateur le choix entre l'utilisation du mouseover ou le clic. Je l'ai déjà essayé avec des boutons mais les radios semblent mieux adaptées. Lorsque l'utilisateur clique sur Hover, il obtient des info-bulles en passant la souris. Lorsque l'utilisateur clique sur Click, il obtient des info-bulles en cliquant sur. Je cherchais des moyens de contrôler ce choix et je ne pouvais pas comprendre les explications de la façon de le faire avec des attributs de données personnalisés https://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom- manipulation-with-data-states/'> (je n'ai pas le premier indice) alors j'ai décidé que je devrais d'abord apprendre à le faire en supprimant les écouteurs d'événements, cela devrait être facile, non? J'ai eu mes écouteurs d'ajout d'événement bien rangés dans un objet comme méthodes quand j'ai dû tout démonter afin d'utiliser removeEventListeners, puisque les valeurs de méthode étaient des fonctions anonymes. C'était juste pour l'organisation, mais il avait l'avantage supplémentaire de rendre naturel de rester hors de la portée mondiale. Cela met tout dans la portée mondiale, mais mon vrai problème est pire que cela.
VRAI PROBLÈME: Le code fonctionne pour supprimer le clic lorsque vous utilisez le survol de la souris ou pour supprimer le survol lorsque vous utilisez le clic, mais une fois que j'enlève un type d'événement, les boutons radio ne le rallument pas. Apparemment, j'ai besoin d'une manière différente de rajouter les écouteurs d'événements mais je ne sais pas pourquoi ni comment. Je ne sais pas pourquoi cela ne fonctionne pas, cela semble simple et je n'ai trouvé aucun exemple de ce genre de situation pour quelqu'un d'autre. Ceci est important car je prévois de l'adapter à une requête média pour les utilisateurs avec des écrans tactiles car ils ne peuvent pas utiliser le survol, mais je préfère un survol par défaut si l'utilisateur a une souris.
<div id='tooltipAncestorOff'>
<div id='tooltipAncestorClick'>
<div id='tooltipAncestorHover'>
<p class='autosize'>Just <span class='hilite' id="onez">FIRST hilite</span></p>
<p class='autosize'>Only <span class='hilite' id="twoz">SECOND hilite</span></p>
<p class='autosize'>Only <span class='hilite' id="threez">THIRD hilite</span></p>
<p class='autosize'>Only <span class='hilite' id="fourz">FOURTH hilite</span></p>
<p class='autosize'>Only <span class='hilite' id="fivez">FIFTH hilite</span></p>
<p class='autosize'>Only <span class='hilite' id="sixz">SIXTH hilite</span></p>
</div> </div> </div>
<ul>
<li id='toolTip'>placeholder... solve: why do I need text here?</li>
</ul>
<form name="chooseTooltips">
<input type="radio" name="tooltips" value="hover" onclick = 'onHoverButton()' checked> HOVER TOOLTIPS</br>
<input type="radio" name="tooltips" value="click" onclick = 'onClickButton()'> CLICK TOOLTIPS</br>
<input type="radio" name="tooltips" value="none" onclick = 'offBothButtons()'> NO TOOLTIPS</br>
</form>
<script>
var what = {
onez: 'FIRST definition',
twoz: 'SECOND definition',
threez: 'THIRD definition',
fourz: 'FOURTH definition',
fivez: 'FIFTH definition',
sixz: 'SIXTH definition'
};
var how = {
showHide: function (stile){
var displ = document.getElementById('toolTip');
displ.style.display = stile;
}
};
//most of the script below was in an object but I had to move it to global scope when using removeEventListener
var clickFunx = function(evt) {
var clicked = evt.target.id;
toolTip.firstChild.textContent = (what[clicked]);
how.showHide('block');
console.log('clicked');
};
var findClickParent = document.getElementById('tooltipAncestorClick');
findClickParent.addEventListener('click', clickFunx, false);
function removeHoverFunx() {
findHoverParent.removeEventListener('mouseover', hoverFunx, false);
}
var hoverFunx = function(evt) {
var mousedOver = evt.target.id;
toolTip.firstChild.textContent = (what[mousedOver]);
how.showHide('block');
console.log('moused over');
};
var findHoverParent = document.getElementById('tooltipAncestorHover');
findHoverParent.addEventListener('mouseover', hoverFunx, false);
function removeClickFunx() {
findClickParent.removeEventListener('click', clickFunx, false);
};
function hiliteOut() {
var findOutParent = document.getElementById('tooltipAncestorHover');
findOutParent.addEventListener('mouseout', function() {
how.showHide('none');
console.log('moused out');
}, false);
};
/********radio controls**********/
function onHoverButton() {
hoverFunx;
hiliteOut();
removeClickFunx();
};
function onClickButton() {
clickFunx;
hiliteOut();
removeHoverFunx();
};
function offBothButtons() {
removeHoverFunx();
removeClickFunx();
}
</script>
@Dekel: Comme je le vois, vous ajoutez un IF au début de la fonction de clic et un au début de la fonction hover pour voir quelle radio est vérifiée. Si la radio de clic n'est pas cochée, la partie de la fonction qui affiche les info-bulles sur les événements de clic est ignorée en ajoutant RETOUR après le SI. Par "enregistré les deux événements" je suppose que vous voulez dire que vous laissez le navigateur voir tout sauf le code qui exécute réellement la fonction pertinente du bouton radio non cochée. Merci beaucoup, bonne réponse, et elle fait exactement ce qu'elle est censée faire. – Lutherman