KineticJS Drag事件阻止了双击事件的触发 [英] KineticJS Drag event is preventing Double-click event from firing
问题描述
我在KineticJs中有一个节点，它有一个拖动处理程序和双击处理程序。当用户尝试双击对象并在初始单击期间稍微移动时，拖动处理程序会拦截双击的内容，从而破坏体验。我已经广泛搜索了这个，并尝试了许多解决方案无济于事。此问题在以下链接中捕获，但未对kinetic进行更新。
I have a node in KineticJs that has both a drag handler and double-click handler on it. When a user attempts to double-click on the object and moves slightly during the initial click, the drag handler intercepts what would be the double-click, breaking the experience. I have googled this extensively and have tried many solutions to no avail. This issue is captured in the link below but no update has been made to kinetic.
https://github.com/ericdrowell/KineticJS/issues/243
示例代码：
shape.on("dblclick dbltap", function (pos) {
ModalWindow(this.parent.data,pos); //Loads a modal window
});
shape.on("mousedown",function(e) {
this.setDraggable(false);
var that = this;
console.log("Drag Off");
setTimeout(function(){
that.setDraggable(true);
console.log("Drag On");
},1000);
});
推荐答案
确定拖动与点击是一个常见问题。
处理冲突的一种常见方法是：
One common way to handle the conflict is:
- on
dragstart保存节点的起始位置 - on
dragendcheck如果节点移动小于10像素（或任何距离） - 如果< 10像素，则将节点移回其起始位置
- 如果< 10像素，触发
点击事件
- on
dragstartsave the starting position of the node - on
dragendcheck if the node has moved less than 10 pixels (or whatever distance) - if <10 pixels, move the node back to its starting position
- if <10 pixels, fire the
clickevent
这是示例代码和演示： http://jsfiddle.net/m1erickson/yh67y/
Here's example code and a Demo: http://jsfiddle.net/m1erickson/yh67y/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
$p=$("#event");
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var circle1 = new Kinetic.Circle({
x:100,
y:100,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
circle1.startingPos;
circle1.referredEvent="";
circle1.on("dragstart",function(){
this.startingPos=this.position();
});
circle1.on("dragend",function(){
var endingPos=this.position();
var dx=Math.abs(endingPos.x-this.startingPos.x);
var dy=Math.abs(endingPos.y-this.startingPos.y);
if(dx<10 && dy<10){
this.position(this.startingPos);
this.referredEvent="--from drag";
this.fire("click");
layer.draw();
}
});
circle1.on("click",function(){
$p.text("clicked"+this.referredEvent);
this.referredEvent="";
});
layer.add(circle1);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drags less than 10 pixels will cause click<br>instead of drag.</h4>
<p id="event">Drag or Click the circle</p>
<div id="container"></div>
</body>
</html>
现在进行双击：
由于引用的点击不会计入双击的其中一个点击，因此您必须保存每次点击发生的时间（在点击事件处理程序中）。如果您在半秒（或任何时间限制）内有2次点击，则触发doubletap事件--this.fire（doubletap）;
Since the referred click won't count towards one of the taps of a double-tap, you will have to save the time each click occurs (in the click event handler). If you have 2 clicks within a half-second (or whatever time limit) then trigger the doubletap event--this.fire("doubletap");
是的......这听起来像是一个黑客。
但事实是moused可以同样发出咔哒声或拖拽声。
But the fact is a mousedown can equally signal a click or a drag.
这是我们得到的最好的解决方法。
This is the best workaround we've got.
这篇关于KineticJS Drag事件阻止了双击事件的触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
