我正在制作一个人可以吸引的div。我已经在jQuery中使用了mousedown/mouseup/mousemove
个事件。但问题是,鼠标移动事件发射太慢。当我尝试画画时,我没有连线,而是散点。
这是一个小提琴:http://jsfiddle.net/zose3417/2/
是否可以更频繁地触发此事件?
$(document).ready(function() {
var isPerformingLeftMouseClick = false;
$('#sketch-box').on('mousedown', function(event) {
switch (event.which) {
case 1:
//alert('Left Mouse button pressed.');
isPerformingLeftMouseClick = true;
break;
case 2:
//('Middle Mouse button pressed.');
break;
case 3:
//alert('Right Mouse button pressed.');
break;
default:
//alert('You have a strange Mouse!');
}
});
$(document).on('mouseup', function() {
isPerformingLeftMouseClick = false;
});
$('#sketch-box').on('mousemove', function(e) {
if (isPerformingLeftMouseClick) {
//var parentOffset = $(this).parent().offset();
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
var linkDot = $('#dot-box').children().first().clone();
$(linkDot).css('top', relY);
$(linkDot).css('left', relX);
$(this).append(linkDot);
}
});
});
答案 0 :(得分:2)
没有办法增加鼠标移动频率,它只是基于浏览器允许的内容。鉴于JavaScript eventloop和您运行的不同系统,这是有道理的。如果你做setTimeout(500, ..)
,你可能实际上不会被调用,直到510,520或更长时间,如果有什么东西在占用循环。
获得所需结果的最佳方法是在事件之间绘制线条(因此保存前一个点并继续它),或者您可以使用插值来尝试“猜测”更好的运动。像D3这样的事情help you do things like interpolation pretty easily。
编辑: 这样做的一种巧妙方法可能是在浏览器允许的情况下及时绘制你的点,然后在你去的时候为该动作插入一组点。