在同一个元素中使用Javascript、单击、双击和拖动
Javascript, click, doubleclick and drag in the same element
我需要一个函数来判断用户是在点击、双击还是拖动鼠标。
因为这一切都发生在同一个画布上,所以使用正常事件是不起作用的。我通过谷歌找到了这个:
不建议将处理程序绑定到click和dblclick相同元素的事件。触发的事件顺序各不相同从一个浏览器到另一个浏览器,有些浏览器会收到两次点击事件其他人只有一个。如果一个界面对单个的反应不同-并且无法避免双击,则dblclick事件应该在单击处理程序中模拟。我们可以通过节省处理程序中的时间戳,然后将当前时间与在后续单击时保存的时间戳。如果差异很小足够了,我们可以将点击视为双击。
我怎样才能以一种好的方式做到这一点?
首先查看是否按下了单击(用于拖动)?当它被释放时,是否将其视为点击?然后如果再次点击双击?
如何将其转换为代码?感谢您的帮助。
下面的内容应该会让你开始,我使用jQuery只是为了让它更容易显示,这可以用直接的JS实现,只是有很多噪音
$(function() {
var doubleClickThreshold = 50; //ms
var lastClick = 0;
var isDragging = false;
var isDoubleClick = false;
$node = ("#mycanvas");
$node.click(function(){
var thisClick = new Date().getTime();
var isDoubleClick = thisClick - lastClick < doubleClickThreshold;
lastClick = thisClick;
});
$node.mousedown(function() {
mouseIsDown = true;
});
$node.mouseUp(function() {
isDragging = false;
mouseIsDown = false;
});
// Using document so you can drag outside of the canvas, use $node
// if you cannot drag outside of the canvas
$(document).mousemove(function() {
if (mouseIsDown) {
isDragging = true;
}
});
});
我可能会在点击事件中设置一个计时器来检查是否有另一次点击。
time = 0
if(new Date().getTime() < time + 400) {
// Double click
throw new Error("Stop execution");
}
if(!!time)
throw new Error("Stop execution");
time = new Date().getTime();
// Single click
类似的东西。未经测试,出于某种奇怪的原因,我现在无法思考。
相关文章:
- 双击泛光灯单击
- 如何在Firefox中禁用视频的单击和双击控件
- 当单选按钮的标签可单击时双击
- 覆盖单击时关闭菜单需要双击而不是单击
- 如何避免在浏览器 JavaScript 中双击时(单击鼠标)处理
- 使用双击事件时如何取消单击事件
- 浏览器后退按钮 单击到双击使用 JavaScript
- 双击时设置内容可编辑 - IE 不允许编辑,除非再单击一次
- 如何在 javascript 中的同一元素上应用长单击事件和双击事件
- 如何通过双击而不是单击触发链接(标签)
- 只需单击标签即可双击
- 单击时添加几行,双击删除添加的行
- 有没有办法将所有双击事件绑定到jQuery / JavaScript中的单击等效项
- jQuery 单击仅在双击时才有效
- 容器导航下拉列表的单击问题(需要双击才能下拉)
- jQuery将数据从单击事件传递到双击
- 动画在双击而不是单击时工作
- 如何在'单击'和'双击'在相同的元素上
- 在同一个元素中使用Javascript、单击、双击和拖动
- 使我的点击双击事件工作