3
<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>
网页已突出显示文本，用户将鼠标悬停以获取定义某些术语的工具提示。这部分工作，我学会了如何使用事件代理重新使用事件监听器，所以我只需要每种监听器中的一种。删除后重新添加事件侦听器 - Javascript
我想使用无线电输入给用户选择是否使用鼠标悬停或单击。我已经尝试了按钮，但收音机似乎更适合。当用户点击悬停时，他通过鼠标悬停获取工具提示。当用户点击Click时，他通过单击获取工具提示。我正在寻找方法来控制这种选择，并无法理解如何使用自定义数据属性的解释https://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-操作与数据状态/'>（我没有第一个线索），所以我决定我应该先学习如何去除事件监听器，这应该很容易，对吗？
我把我的添加事件侦听器很好地搁置在对象中作为方法时，我不得不将它撕下来以便使用removeEventListeners，因为方法值是匿名函数。这仅仅是为了组织，但它具有使其远离全球范围的自然的附加好处。这使一切都进入全球范围，但我的真正问题比这更糟糕。
REAL问题：代码在使用鼠标悬停时可以消除点击，或者在使用点击时删除鼠标悬停，但是一旦我删除一个事件类型，单选按钮就不会再打开它。显然，我需要一种不同的方式来重新添加事件监听器，但我不知道为什么或如何。我不知道为什么这不起作用，这看起来很直接，我还没有发现其他人发生这种情况的一个例子。这很重要，因为我打算将它适用于带有触摸屏的用户的媒体查询，因为他们无法使用悬停，但如果用户使用鼠标，我更喜欢鼠标悬停。
<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：正如我所看到的那样，您在点击功能开始时添加一个IF，在悬停功能开始时添加一个IF以查看检查了哪个收音机。如果点击收音机没有被选中，那么显示单击事件工具提示的功能部分将通过在IF之后添加RETURN来跳过。通过“注册两个事件”，我想你的意思是让浏览器查看除了实际执行未经检查的单选按钮相关功能的代码之外的所有内容。非常感谢，很好的答案，它完全符合它的要求。 – Lutherman