使用jQuery检测鼠标速度

时间:2013-10-17 01:51:09

标签: javascript jquery performance mouse detect

我想检测鼠标速度,例如只有在检测到的数字大于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>

1 个答案:

答案 0 :(得分:1)

(我是插件的作者,这在这里引起了麻烦)

该示例无效,因为this.value未指速度(undefined)。这是您的示例的更新版本: http://jsfiddle.net/eY6Z9/

将速度值存储在变量中而不是存储在HTML元素的文本值中可能更有效。这是一个带有该增强功能的更新版本: http://jsfiddle.net/eY6Z9/2/

希望有所帮助!