删除--Javascript后重新添加事件侦听器 希利特先生{ 颜色：绿色； 字号：1.5em； 字体大小：粗体； } .autosize{宽度：自动；高度：自动；} ul{背景色：浅蓝色；高度：24px；} li{背景色：粉红色；宽度：300px；高度：24px；字体重量：粗体；字体大小：1.5em；}

该网页突出显示了文本，用户将鼠标悬停在该文本上以获得定义某些术语的工具提示。这一部分是有效的，我学习了如何使用事件委托，它重新使用事件监听器，所以每种监听器我只需要一个

我尝试使用无线电输入，让用户选择是使用鼠标还是单击。我已经用按钮试过了，但收音机似乎更适合。当用户单击鼠标悬停时，他将通过鼠标悬停获得工具提示。当用户单击Click时，他通过单击获得工具提示。我正在寻找控制这种选择的方法，但无法理解有关如何使用自定义数据属性的解释https://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/“>（我没有第一条线索）所以我决定首先通过移除事件监听器来学习如何做，这应该很容易，对吧

为了使用removeEventListeners，我将add事件侦听器作为方法很好地搁置在一个对象中，因为方法值是匿名函数，所以我必须将其全部拆下。这只是为了组织，但它还有一个额外的好处，那就是自然地置身于全球范围之外。这将一切都纳入全球范围，但我真正的问题比这更糟

真正的问题：代码在使用mouseover时可以删除click，或者在使用click时可以删除mouseover，但是一旦我删除了一种事件类型，单选按钮就不会再打开它。显然，我需要一种不同的方式来重新添加事件侦听器，但我不知道为什么或如何添加。我不知道为什么这不起作用，这似乎很简单，我还没有发现任何其他人会发生这种情况。这一点很重要，因为我计划将其调整为触摸屏用户的媒体查询，因为他们不能使用鼠标悬停，但如果用户有鼠标，我更喜欢鼠标悬停默认值

<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>

只是第一个hilite
仅第二个hilite
只有第三个hilite
只有第四个hilite
只有第五个hilite
只有第六个hilite

占位符。。。解答：为什么我需要文本

悬停工具提示

单击工具提示

没有工具提示

变量什么={
onez:“第一个定义”，
twoz:“第二个定义”，
threez:“第三个定义”，
fourz:“第四种定义”，
fivez：“第五个定义”，
第六个定义
};
var how={
显示隐藏：功能（阶梯）{
var disp=document.getElementById（“工具提示”）；
display.style.display=stile；
}
};
//下面的大部分脚本都在一个对象中，但在使用removeEventListener时，我不得不将其移动到全局范围
var clickFunx=函数（evt）{
var clicked=evt.target.id；
toolTip.firstChild.textContent=（单击的内容）；
how.showHide（'block'）；
console.log（'clicked'）；
};  
var findClickParent=document.getElementById（'tooltipAncestorClick'）；
findClickParent.addEventListener（'click'，clickFunx，false）；
函数removeHoverFunx（）{
findhoverprent.removeEventListener（'mouseover'，hoverFunx，false）；
}   
var hoverFunx=函数（evt）{
var mousedOver=evt.target.id；
toolTip.firstChild.textContent=（what[mousedOver]）；
how.showHide（'block'）；
console.log（'moused over'）；
};
var findhoverprent=document.getElementById（'tooltipAncestorHover'）；
findhoverprent.addEventListener（'mouseover'，hoverFunx，false）；
函数removeClickFunx（）{
findClickParent.removeEventListener（'click'，clickFunx，false）；
};
函数hiliteOut（）{
var findOutParent=document.getElementById（'tooltipAncestorHover'）；
findOutParent.addEventListener（'mouseout'，function（）{
how.showHide（'none'）；
console.log（'moused out'）；
}，假）；
};
/********无线电控制装置*********/
函数onHoverButton（）{
hoverFunx；
hiliteOut（）；
removeClickFunx（）；
};
函数onClickButton（）{
clickFunx；
hiliteOut（）；
removeHoverFunx（）；
};
关闭两个按钮（）的功能{
removeHoverFunx（）；
removeClickFunx（）；
}

不是每次都添加/删除事件-我注册了两个事件（悬停/单击），并且我仅根据无线框的当前值运行相关功能：

    <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>

以下是对代码的修复：

var什么={
onez:“第一个定义”，
twoz:“第二个定义”，
threez:“第三个定义”，
fourz:“第四种定义”，
fivez：“第五个定义”，
第六个定义
};
var how={
显示隐藏：功能（阶梯）{
var disp=document.getElementById（“工具提示”）；
display.style.display=stile；
}
};
//下面的大部分脚本都在一个对象中，但在使用removeEventListener时，我不得不将其移动到全局范围
var clickFunx=函数（evt）{
if（document.querySelector（'[name=“tooltips”]：checked'）.getAttribute（'value'）！='click'）{
返回；
}
var clicked=evt.target.id；
toolTip.firstChild.textContent=（单击的内容）；
how.showHide（'block'）；
//console.log（'clicked'）；
};  
var findClickParent=document.getElementById（'tooltipAncestorClick'）；
findClickParent.addEventListener（'click'，clickFunx，false）；
乐趣
if (document.querySelector('[name="tooltips"]:checked').getAttribute('value') != 'click') {
    return;
}