1

[编辑] 所以我使用了下面建议的 JavaScript 工具提示之一。我得到了提示，可以在您停下来时显示，如果您移动则隐藏。唯一的问题是当我这样做时它有效：

document.onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
        document.getElementById('MyDiv').onmousemove = function() {
        UnTip();
    };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

但我希望该函数仅适用于特定的 div，如果我将第一行更改为 "document.getElementById('MyDiv').onmousemove = (function() {" 我得到一个 javascript 错误 document.getElementById('MyDiv' ) 为空 我错过了什么......？？

[/编辑]

当用户鼠标在元素上停止超过 1.5 秒时，我想显示气球样式消息。然后，如果他们移动鼠标，我想隐藏气球。我正在尝试使用一些在野外发布的 JavaScript 代码。这是我用来检测鼠标何时停止的代码：

document.onmousemove = (function() {
    var onmousestop = function() {
        //code to show the ballon
        };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

所以我有两个问题。一，有没有人推荐的轻量级 javascript 气球将显示在光标位置。第二，检测鼠标停止的代码工作正常，但我对如何检测鼠标再次开始移动并隐藏气球感到困惑。谢谢...

4

4 回答 4

6

回答这个问题有点晚了，但这将对有需要的人有所帮助。

我需要这个函数能够检测鼠标何时停止移动一段时间以在悬停在视频上时隐藏 HTML/JS 播放器控制器。这是工具提示的修改后的代码：

document.getElementById('MyDiv').onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
    }, thread;

    return function() {
        UnTip();
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

在我的例子中，我使用了一些 jQuery 来为我的播放器控制器选择元素：

$('div.video')[0].onmousemove = (function() {
    var onmousestop = function() {
        $('div.controls').fadeOut('fast');
    }, thread;

    return function() {
        $('div.controls').fadeIn('fast');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();
于 2010-03-04T18:04:54.593 回答
3

jQuery 插件hoverIntent提供了类似的行为。它通过检查用户是否减慢鼠标移入元素并花费一定时间悬停在元素上来确定用户是否“打算”将鼠标悬停在特定元素上。

它只在用户离开元素时触发“out”事件，这听起来不像您正在寻找的东西，但代码非常简单。

当您不需要收集事件时，还要注意将事物绑定到 mousemove，mousemove 会快速触发大量事件，并且可能会对您的站点性能产生严重影响。hoverIntent 仅在光标进入活动元素时绑定 mousemove，然后取消绑定。

如果您尝试 hoverIntent 我在缩小版本没有触发“out”事件时遇到了一些问题，所以我建议使用完整的、未缩小的源。

于 2008-10-07T07:58:27.737 回答
2

这是一个漂亮的 jQuery 插件，用于提供一个不错的浮动工具提示。

http://jqueryfordesigners.com/demo/coda-bubble.html

[编辑] 我想如果没有看到伴随的 HTML，就很难说出了什么问题。我会仔细检查该元素是否具有标签中指定的适当 ID。除此之外，除非这是一个学术练习，否则我建议使用我上面提到的 jQuery 插件之类的东西。当然，还有许多其他预先构建的工具，它们已经处理了您当前正在处理的所有细节。

于 2008-10-06T16:49:41.550 回答
1 
document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows

使用 Prototype.js 语法，您可以在气球可见时确定鼠标已移动。

于 2008-10-06T16:58:43.700 回答