javascript-KineticJS Drag事件阻止触发Double-click事件

2019-11-22 02:37:05 阅读：212 来源： 互联网

我在KineticJs中有一个同时具有拖动处理程序和双击处理程序的节点.当用户尝试双击该对象并在首次单击期间略微移动时,拖动处理程序将截获双击,从而中断了体验.我已经在Google上进行了广泛的搜索,并尝试了许多无济于事的解决方案.在下面的链接中捕获了此问题,但未对动力学进行任何更新.

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);
});

解决方法:

确定拖动与点击是一个常见问题.

解决冲突的一种常用方法是：

>在dragstart上保存节点的起始位置
>在dragend上检查节点是否移动了少于10个像素(或任何距离)
>如果<10像素,则将节点移回其起始位置
>如果<10像素,则触发点击事件
这是示例代码和演示：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>

现在双击：

由于引用的点击次数不会会计入两次点击的次数之一,因此您必须保存每次点击发生的时间(在click事件处理程序中).如果您在半秒内(或任何时间限制)有2次点击,则触发两次双击事件-this.fire(“ doubletap”);

是的…这听起来像是骇客.

但是事实是,将鼠标按下同样可以表示单击或拖动.

这是我们最好的解决方法.

标签：kineticjs,javascript
来源： https://codeday.me/bug/20191122/2056388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-KineticJS Drag事件阻止触发Double-click事件