刪除后重新添加事件偵聽器 - 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>