Javascript JS-mouseover和mouseout事件是不稳定的_Javascript_Events

Javascript JS-mouseover和mouseout事件是不稳定的

javascript events

Javascript JS-mouseover和mouseout事件是不稳定的,javascript,events,Javascript,Events,HTML 目标：更改图标类，或者在本例中，当有人将鼠标悬停在图标上时更改属性，当用户将鼠标悬停在图标外时将其还原。上面的代码似乎有效，但有几个问题。1当我将鼠标悬停在它上面时，它会多次激发；2多次，它不会将属性更改回far state=false。我尝试将这些事件附加到而不是附加到，但问题仍然存在 p、不使用JQUERY之类的东西在这里，我添加和删除一个类悬停，但也可能是任何属性或其他东西 window.addEventListener'mousemove'，e=>{ 让hover=do

HTML

目标：更改图标类，或者在本例中，当有人将鼠标悬停在图标上时更改属性，当用户将鼠标悬停在图标外时将其还原。上面的代码似乎有效，但有几个问题。1当我将鼠标悬停在它上面时，它会多次激发；2多次，它不会将属性更改回far state=false。我尝试将这些事件附加到而不是附加到，但问题仍然存在

p、不使用JQUERY之类的东西

在这里，我添加和删除一个类悬停，但也可能是任何属性或其他东西

window.addEventListener'mousemove'，e=>{ 让hover=document.querySelector.hover；如果e.target==悬停返回；如果悬停{ 控制台。登录“鼠标退出”，悬停； hover.classList.remove'hover'； } if！e.target.classList.包含“icon” 回来 e、 target.classList.add'hover'；控制台。记录“鼠标悬停”，例如目标 } .图标{ 显示：内联块；宽度：50px；高度：50px；过渡时间：100ms；边框：实心；文本对齐：居中；线高：50px； } .悬停{ 颜色：红色；边界半径：30%；变换：旋转10度 } 1. 2. 3. 4. 5. 6.

像这样的东西

在这里，我添加和删除一个类悬停，但也可能是任何属性或其他东西

7这听起来像是

在纯JS中处理mouseover并不理想，但下面是一个工作示例，其中包含了对我链接的帖子的回答

var元素=document.getElementById'hoverIcon'；元素。addEventListener'mouseover'，函数{ 控制台。记录“鼠标悬停，在这里设置字体类”； }; 元素。addEventListener'mouseout'，函数{ 控制台。登录“鼠标退出，删除这里的类”； }; var事件=新的MouseEvent'mouseover'{ “视图”：窗口， “泡沫”：没错， “可取消”：true }; 偶像

这听起来像是一个复制品

在纯JS中处理mouseover并不理想，但下面是一个工作示例，其中包含了对我链接的帖子的回答

有7个“onmouse…”活动

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

。。。因此，在工作中使用合适的工具是很重要的

在示例中，元素内的单击和鼠标移动不适用-我们只希望在鼠标进入和元素时调用一次函数，在鼠标离开时调用一次函数。因此

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

但是，正如前面提到的，使用Element.addEventListener方法比依赖HTML属性（如onmouse…）更健壮、更灵活。

有7个“onmouse…”事件

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

。。。因此，在工作中使用合适的工具是很重要的

在示例中，元素内的单击和鼠标移动不适用-我们只希望在鼠标进入和元素时调用一次函数，在鼠标离开时调用一次函数。因此

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

但是，正如前面提到的，使用Element.addEventListener方法比依赖HTML属性（如onmouse）更健壮、更灵活……

这是我最初答案的第二个版本，这次是使用多个元素

这是我最初答案的第二个版本，这次有多个元素

如何更改数据前缀来编辑类名？event.currentTarget始终引用事件处理程序已附加到的元素。您没有设置eventListeners和分配处理程序，而是直接从HTML元素onmouse？over/on属性调用函数。因此，找不到的currentTarget。@Jhecht我本来打算更新类名，但因为我在这里使用的是字体超棒的svg图标，所以类名实际上是数据前缀attrib的值。布莱恩·皮科克现在正在努力。谢谢更改数据前缀是如何编辑类名的？event.currentTarget始终引用事件处理程序已附加到的元素。您没有设置eventListeners和分配处理程序，而是直接从HTML元素onmouse？over/on属性调用函数。因此，找不到的currentTarget。@Jhecht我本来打算更新类名，但因为我在这里使用的是字体超棒的svg图标，所以类名实际上是数据前缀attrib的值。布莱恩·皮科克现在正在努力。谢谢，很有趣。我看到你的目标是ID。我有很多这样的元素，它应该只为悬停在上面的那个触发操作。有没有办法解决这个问题？@007我发布了第二个答案来回答这个问题，两个图标触发的动作各不相同，如果您有任何问题，请让我来调整它以适应您试图实现的内容know@007这是我的第二个答案：有趣。我看到你的目标是ID。我有很多这样的元素，它应该只为悬停在上面的那个触发操作。有没有办法解决这个问题？@007我发布了第二个答案来回答这个问题，两个图标触发的动作各不相同，如果您有任何问题，请让我来调整它以适应您试图实现的内容know@007这是我的第二个答案：谢谢你的这种有趣的方法。我将试用它，看看它在我的场景中如何运行。@007我最近添加了控制台日志以显示操作发生的位置刚刚在我的上试用过。只要鼠标在屏幕上移动，它就会触发事件。不确定这是否是一个可行的解决方案。这似乎是因为eventlistener是在窗口级别创建的，所以每当鼠标在屏幕上移动时，它都会启动。感谢您提供了这种有趣的方法。我将试用它，看看它在我的场景中如何运行。@007我最近添加了控制台日志以显示操作发生的位置刚刚在我的上试用过。只要鼠标在屏幕上移动，它就会触发事件。不确定这是否是一个可行的解决方案。这似乎是因为eventlistener是在窗口级别创建的，每次鼠标在屏幕上移动时，它都会启动。感谢您的详细解释和解决方案。你能看看我在做什么吗？错误的事件侦听器方法？谢谢你的详细解释和解决方案。你能不能看一看，看看我在做什么，错误的事件侦听器方法？

/* 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"));
}