使用 jQuery 检测鼠标速度

Detect mouse speed using jQuery

本文关键字：速度 鼠标 检测 jQuery 使用      更新时间：2023-09-26

我想检测鼠标速度，例如，仅当检测到的数字大于 5 时才会触发事件

我发现了一个我认为类似的例子：http://www.loganfranken.com/blog/49/capturing-cursor-speed/

但是我无法让它看到div 内部的数字并根据结果数字触发事件，这是我的尝试：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
    onUpdateSpeed: function(speed) {
        $speedometer.text(speed);
    },
    updateSpeedRate: 20
});


    $("#test-area").mouseover(function(){
    if(this.value > 5) {
        console.log("asdasd");
    }
    else {
        console.log("bbb");
    }

})
});
</script>
<style>
#test-area
{
    background-color: #CCC;
    height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>

</body>
</html>

（我是导致这里麻烦的插件的作者）

该示例不起作用，因为this.value不是指速度（它是undefined）。下面是示例的更新版本：http://jsfiddle.net/eY6Z9/

将

速度值存储在变量中比存储在 HTML 元素的文本值中可能更有效。以下是具有该增强功能的更新版本：http://jsfiddle.net/eY6Z9/2/

希望对您有所帮助！

相关文章：