3
<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>
網頁已突出顯示文本，用戶將鼠標懸停以獲取定義某些術語的工具提示。這部分工作，我學會了如何使用事件代理重新使用事件監聽器，所以我只需要每種監聽器中的一種。刪除後重新添加事件偵聽器 - Javascript
我想使用無線電輸入給用戶選擇是否使用鼠標懸停或單擊。我已經嘗試了按鈕，但收音機似乎更適合。當用戶點擊懸停時，他通過鼠標懸停獲取工具提示。當用戶點擊Click時，他通過單擊獲取工具提示。我正在尋找方法來控制這種選擇，並無法理解如何使用自定義數據屬性的解釋https://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-操作與數據狀態/'>（我沒有第一個線索），所以我決定我應該先學習如何去除事件監聽器，這應該很容易，對嗎？
我把我的添加事件偵聽器很好地擱置在對象中作爲方法時，我不得不將它撕下來以便使用removeEventListeners，因爲方法值是匿名函數。這僅僅是爲了組織，但它具有使其遠離全球範圍的自然的附加好處。這使一切都進入全球範圍，但我的真正問題比這更糟糕。
REAL問題：代碼在使用鼠標懸停時可以消除點擊，或者在使用點擊時刪除鼠標懸停，但是一旦我刪除一個事件類型，單選按鈕就不會再打開它。顯然，我需要一種不同的方式來重新添加事件監聽器，但我不知道爲什麼或如何。我不知道爲什麼這不起作用，這看起來很直接，我還沒有發現其他人發生這種情況的一個例子。這很重要，因爲我打算將它適用於帶有觸摸屏的用戶的媒體查詢，因爲他們無法使用懸停，但如果用戶使用鼠標，我更喜歡鼠標懸停。
<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>
@Dekel：正如我所看到的那樣，您在點擊功能開始時添加一個IF，在懸停功能開始時添加一個IF以查看檢查了哪個收音機。如果點擊收音機沒有被選中，那麼顯示單擊事件工具提示的功能部分將通過在IF之後添加RETURN來跳過。通過「註冊兩個事件」，我想你的意思是讓瀏覽器查看除了實際執行未經檢查的單選按鈕相關功能的代碼之外的所有內容。非常感謝，很好的答案，它完全符合它的要求。 – Lutherman