已解決430363個問題，去搜搜看，總會有你想問的

懸停時高效的 JS 事件監聽器

首頁猿問懸停時高效的 JS 事件監聽器

懸停時高效的 JS 事件監聽器

JavaScript

楊__羊羊 2023-03-03 09:54:35

我編寫了以下腳本，它運行良好。function LogoHoverAdd() { this.classList.add("logo__container--hover");}function LogoHoverRemove() { this.classList.remove("logo__container--hover");}var logo = document.querySelector("h1");logo.addEventListener("mouseover", LogoHoverAdd);logo.addEventListener("mouseout", LogoHoverRemove);我認為，這種方法效率很低，因為我必須實現其中一些事件偵聽器。因此，我試圖通過將它放在一起或使用該ClassList Toggle功能來縮短它。不幸的是，它還沒有奏效。如何寫好這段代碼呢？

查看完整描述

1 回答

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

很明顯，這是一個 Javascript 問題，這是一種創建可重用函數的方法。

function hover(element, enter, leave){

element.addEventListener('mouseenter', enter)

element.addEventListener('mouseleave', leave)

}

然后你可以像這樣傳遞你的元素和回調函數。

hover(document.querySelector('h1'), e => {

// On hover

e.target.classList.add("logo__container--hover")

}, e => {

// On exit hover

e.target.classList.remove("logo__container--hover")

})

您也可以通過修改懸停功能來減少代碼行數。

function hover(element, className){

element.addEventListener('mouseenter', e => element.classList.add(className))

element.addEventListener('mouseleave', e => element.classList.remove(className))

}

然后像這樣使用它。

hover(document.querySelector('h1'), "logo__container--hover")

您現在可以對多個元素可擴展地重用它。

這是我之前的回答：正如 JHeth 提到的，改用CSS 偽類。

h1{

/* Style when not hovering */

}

h1:hover{

/* Style when cursor is on element */

}

反對回復 2023-03-03

1 回答
0 關注
140 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

懸停時高效的 JS 事件監聽器

懸停時高效的 JS 事件監聽器

1 回答

添加回答