删除后重新添加事件侦听器 - Javascript

Question

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

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

我正在尝试使用无线电输入，让用户可以选择是否使用鼠标悬停或点击。 我已经用按钮尝试了它，但无线电似乎更适应。 当用户单击Hover时，他通过鼠标悬停获取工具提示。 当用户单击“单击”时，他会通过单击获取工具提示。 我正在寻找控制这种选择的方法，并且无法理解如何使用自定义数据属性进行解释https://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom- manip-with-data-states /'>（我没有第一个线索）所以我决定首先要通过删除事件监听器来学习如何做到这一点，这应该很容易，对吧？

我将我的add事件监听器很好地搁置在一个对象中作为方法，因为我必须将它全部拆除才能使用removeEventListeners，因为方法值是匿名函数。 这仅仅是为了组织，但它具有额外的好处，可以让它自然地脱离全球范围。 这使一切都在全球范围内，但我真正的问题比这更糟糕。

真正的问题：代码用于在使用鼠标悬停时删除单击，或者在使用单击时删除鼠标悬停，但是一旦我删除了一个事件类型，单选按钮就不会重新打开它。 显然我需要一种不同的方式来重新添加事件监听器，但我不知道为什么或如何。 我不知道为什么这不起作用，它似乎很简单，我还没有找到其中任何一个发生这种情况的例子。 这一点非常重要，因为我计划将其用于具有触摸屏的用户的媒体查询，因为他们无法使用悬停，但如果用户有鼠标，我更喜欢鼠标悬停。

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

Answer 1

而不是每次都添加/删除事件 - 我注册了两个事件（悬停/点击），我只根据收音机盒的当前值运行相关功能：

if (document.querySelector('[name="tooltips"]:checked').getAttribute('value') != 'click') {
    return;
}

以下是对代码的修复：

 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) { if (document.querySelector('[name="tooltips"]:checked').getAttribute('value') != 'click') { return; } 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) { if (document.querySelector('[name="tooltips"]:checked').getAttribute('value') != 'hover') { return; } 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); }; 

 .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;} 

 <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" checked> HOVER TOOLTIPS<br /> <input type="radio" name="tooltips" value="click"> CLICK TOOLTIPS<br /> <input type="radio" name="tooltips" value="none"> NO TOOLTIPS<br /> </form>