删除后重新添加事件侦听器 - 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 /'＆gt;（我没有第一个线索）所以我决定首先要通过删除事件监听器来学习如何做到这一点，这应该很简单，对吧？

我将添加事件侦听器很好地搁置在对象中作为方法，因为方法值是匿名函数，因此我必须将其全部拆除才能使用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

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

public class MyErrorHandler implements ResponseErrorHandler {

@Override
public boolean hasError(ClientHttpResponse clientHttpResponse) throws IOException {
    return hasError(clientHttpResponse.getStatusCode());
}

@Override
public void handleError(ClientHttpResponse clientHttpResponse) throws IOException {
    HttpStatus statusCode = clientHttpResponse.getStatusCode();
    MediaType contentType = clientHttpResponse
        .getHeaders()
        .getContentType();
    Charset charset = contentType != null ? contentType.getCharset() : null;
    byte[] body = FileCopyUtils.copyToByteArray(clientHttpResponse.getBody());

    switch (statusCode.series()) {
        case CLIENT_ERROR:
            throw new HttpClientErrorException(statusCode, clientHttpResponse.getStatusText(), body, charset);
        case SERVER_ERROR:
            throw new HttpServerErrorException(statusCode, clientHttpResponse.getStatusText(), body, charset);
        default:
            throw new RestClientException("Unknown status code [" + statusCode + "]");
    }

}

private boolean hasError(HttpStatus statusCode) {
    return (statusCode.series() == HttpStatus.Series.CLIENT_ERROR ||
        statusCode.series() == HttpStatus.Series.SERVER_ERROR);
}

以下是对您的代码的修复：

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