使用Prototype.js检测鼠标是否接触到元素

Detect if mouse is touching element using Prototype.js?

本文关键字：接触 元素 是否 鼠标 Prototype js 检测 使用      更新时间：2023-09-26

我正在尝试制作一个Javascript应用程序，当鼠标触摸某个元素时，它会慢慢淡出，当鼠标离开该元素时，元素会逐渐淡出。我在Scriptaculous中使用Prototype，那么有没有Prototype函数可以告诉我鼠标是否在任何给定时间触摸对象？

我使用脚本淡出/淡入效果的主要问题是，当一个在另一个完成之前被触发时，效果会发生冲突，元素会表现不佳。

只需将效果对象存储在某个地方（例如在闭包中），并在您想要应用不同效果时取消它

var element = $("element"),
    currentEffect = null;
element.observe("mouseenter", function() {
    if (currentEffect) {
        currentEffect.cancel();
    }
    currentEffect = new Effect.Fade(element);
});
element.observe("mouseleave", function() {
    if (currentEffect) {
        currentEffect.cancel();
    }
    currentEffect = new Effect.Appear(element);
});

jsfiddle演示

（很明显，您可以通过多种方式进行重构，但基本上您所需要做的就是观察mouseenter和mouseleave事件，并记住在开始新的事件之前取消任何运行效果）

相关文章：