JS-mouseover和mouseout事件是不固定的

Question

的HTML

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i class="far fa-heart" onmouseover="change(true)" onmouseout="change(false)"></i>
    </div>
</a>

JS

change = (state) => {
    state
        ? event.currentTarget.setAttribute('data-prefix', 'fas')
        : event.currentTarget.setAttribute('data-prefix', 'far');
};

目標：
當有人將鼠標懸停在圖標上時更改圖標（類，在這種情況下為屬性），當用戶將鼠標懸停在圖標上時將其還原。 上面的代碼似乎有效，但是有幾個問題。 1）當我將鼠標懸停在它上面時，它會發射很多次； 2）在很多情況下，它不會將屬性更改回“ far”（狀態= false）。 我嘗試將那些事件附加到<a>而不是<li>但是問題仍然存在。

PS不使用JQUERY

Answer 1

像這樣的東西？

在這里，我添加和刪除了類hover ，但是ti也可能是任何屬性或其他東西

 window.addEventListener('mousemove', e => { let hovered = document.querySelector('.hover'); if (e.target === hovered) return; if (hovered) { console.log('mouse out from', hovered); hovered.classList.remove('hover'); } if (!e.target.classList.contains('icon')) return; e.target.classList.add('hover'); console.log('mouse over on', e.target) }) 

 .icon { display: inline-block; width: 50px; height: 50px; transition: 100ms; border: solid; text-align: center; line-height: 50px; } .hover { color: red; border-radius: 30%; transform: rotate(10deg) } 

 <div class="icon">1</div> <div class="icon">2</div> <div class="icon">3</div> <div class="icon">4</div> <div class="icon">5</div> <div class="icon">6</div> <div class="icon">7</div> 

Answer 2

這聽起來像是我如何在純JavaScript中模擬鼠標懸停以激活CSS“：hover”的副本。

在純JS中處理鼠標懸停不是理想的方法，但是這是一個有效的示例（由我鏈接的帖子的答案引起）。

 var element = document.getElementById('hoverIcon'); element.addEventListener('mouseover', function() { console.log('Mouse over, set Font Awesome class here'); }); element.addEventListener('mouseout', function() { console.log('Mouse out, remove Font Awesome class here'); }); var event = new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }); 

 <a class="level-item like-icon"> <div class="icon is-medium"> <i id="hoverIcon" class="far fa-heart">ICON</i> </div> </a> 

Answer 3

有7個'onmouse ...'事件...

onmousedown, 
onmouseenter, 
onmouseleave, 
onmousemove, 
onmouseout, 
onmouseover, 
onmouseup

...因此，重要的是要為工作選擇合適的人。

在示例中，元素內的單擊和鼠標移動不適用-我們所需要的是在鼠標進入元素時調用一次函數，在鼠標離開時調用一次函數。 因此...

<!-- HTML -->

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i class="far fa-heart" 
           onmouseenter="change(this)"
           onmouseleave="change(this)"></i>
    </div>
</a>

因此，在這里使用onmouseenter和onmouseleave屬性來調用change()函數似乎是明智的，在這種情況下，通過this關鍵字將HTML元素作為參數傳遞給鼠標下方。

現在，該函數可以檢查元素，並檢查它是否具有所需和必需的“數據前綴”屬性，以及是否具有該屬性。 然后，我們可以使用此條件來設置/重置“數據前綴”屬性的值...

/* JavaScript */

change = (elem) => {
    // does the Element have a 'data-prefix' attribute
    // and what is it set to?
    let isSet = elem.hasAttribute("data-prefix") && (
        "far" === elem.getAttribute("data-prefix")
    );
    elem.setAttribute("data-prefix", (isSet ? "fas" : "far"));
}

但是，正如已經提到的那樣，使用Element.addEventListener()方法比依賴HTML屬性（如onmouse... Element.addEventListener()更加健壯和靈活。

Answer 4

這是我最初回答的第二個版本，這次包含多個要素。

 var elements = document.getElementsByClassName("hover-icon"); var i; for (i = 0; i < elements.length; i++) { element = elements[i]; element.addEventListener('mouseover', function(data) { console.log('Mouse over, set Font Awesome of ID ' + data.originalTarget.id + " here"); }); element.addEventListener('mouseout', function(data) { console.log('Mouse out, remove Font Awesome of ID ' + data.originalTarget.id + " here"); }); } var event = new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }); 

 <a class="level-item like-icon"> <div class="icon is-medium"> <i id="hoverIcon1" class="hover-icon far fa-heart">ICON1</i> <i id="hoverIcon2" class="hover-icon far fa-heart">ICON2</i> </div> </a>