<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>
答案 0 :(得分: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;}