KineticJS拖動事件阻止雙擊事件發射

我在KineticJs中有一個節點，它具有拖動處理程序和雙擊處理程序。當用戶嘗試雙擊對象並在初始點擊過程中輕微移動時，拖動處理程序將攔截雙擊，從而破壞體驗。我已經廣泛搜索這個，並嘗試了許多解決方案無濟於事。這個問題在下面的鏈接中被捕獲，但沒有更新動力學。KineticJS拖動事件阻止雙擊事件發射

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

來源

2014-03-05 dsmith11211

確定將VS Click是一個常見的問題。

處理衝突的一種常見的方法是：

上dragstart節省dragend校驗節點
的起始位置，如果該節點已經移動小於10個像素（或任何距離）
如果< 10個像素，移動節點回到其起始位置
如果< 10個像素，火click事件

這裏的示例代碼和演示：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次點擊，則觸發雙重事件--this.fire（「doubletap」）;

是的......這一切聽起來像一個黑客。

但事實是mousedown可以同樣發出點擊或拖動。

這是我們得到的最佳解決方法。

來源

2014-03-06 01:44:28 markE

感謝您的快速響應！不幸的是，這種特殊的方法不適用於我們，因爲我們的節點被拖拽到特定的列。換句話說，當拖動事件在預期的雙擊時觸發時，節點不會移動，因爲「拖動」非常微小。需要發生的是在庫級別設置的閾值，其在覆蓋特定像素距離之後僅設置'is_dragging'標誌。現在就看看引擎蓋下。再次感謝。 – dsmith11211

這是間接代碼的功能。（1）mousedown（2）如果鼠標未移動10px，則啓動拖動（3）mouseup（4a），然後取消拖動並提高點擊事件。（4b）如果鼠標已移動10px，則執行拖動操作。 – markE

你是對的，我可以使用自定義雙擊處理程序的示例中的邏輯來實現我正在尋找的結果。非常感謝你，你肯定是個救星。（我會投票給你，但不能作爲stackoverflow初學者） – dsmith11211

KineticJS拖動事件阻止雙擊事件發射

回答

相關問題