HammerJS觸發點擊後dragend

我有一個完美的工作hammerjs拖動監聽器，捕獲拖動就像我所期望的。但是，當你放手時，就在編輯器triggered之後，它也會觸發一個click事件。所以如果你點擊拖動（移動）目標，並且光標恰好在鏈接上，那麼當你放開（放下）時，它會觸發點擊鏈接，這是我不想要的。HammerJS觸發點擊後dragend

這裏是我的代碼：

$('.draggable').hammer({ 
    drag_min_distance: 0, 
    drag_max_touches: 2, 
    drag_lock_to_axis: true, 
    drag_lock_min_distance: 30 
}).on('drag', handleMiddleEvent) 
    .on('dragstart', handleStartEvent) 
    .on('dragend', handleEndEvent);

如果我CONSOLE.LOG在所有三個處理的event和的console.log點擊events上的所有鏈接，我得到這樣的事情在我的控制檯：

dragstart 
dragmiddle 
dragmiddle 
dragmiddle 
dragmiddle 
dragend 
click

我想避免在最後點擊。我嘗試將event.stopPropagation()添加到所有處理方法，但無濟於事。

來源

2013-12-19 Matt Stauffer

我能夠通過添加一個「is_dragging」全局變量，在handleStartEvent中將其設置爲true，並在handleEndEvent中將100ms setTimeout設置爲false，然後檢查全局變量var在我的點擊處理程序上。但那真是太難看了。我真的希望有更好的東西。 –

您是否找到更好的解決方案？ –

嘗試使用Hammer.js tap事件而不是鏈接上的click事件。

來源

2014-01-01 16:55:57

這有點麻煩，而不是防止點擊和綁定水龍頭，但它的作品。 – Kru

-1

我有一個非常類似的問題，並找到了某種解決方法 - 我知道它很髒，但鏈接不會被拖動點擊。我想拖動一個wrapper-div，這是我在下面的js中看到的包裝元素。它有幾個鏈接，當拖動停在它們上面時，點擊它們，我想阻止它發生。

首先，我定義一個div那是一切，但一組藏在我的HTML的頂部：

<div id="wrapper"> 
    <div id="linklist"> 
      <-- Links etc in here--> 
      <div id="preventClick" style="visibility: hidden; position: absolute; width: 5000px; height: 6000px; "></div> 
    </div> 
</div>

然後，在錘子的功能，股利是在爲dragStart設置爲可見的（在這種情況下，，一個拖拽） - 你不能看到它，因爲它沒有背景色或任何內容。 JS：

var wrapper = document.getElementById("wrapper"); 

Hammer(wrapper).on("dragdown", function() { 
    handleDragDown(); //call function that handles movement 
    var preventClick = document.getElementById("preventClick"); 
    preventClick.style.visibility = 'visible'; 
}); 

Hammer(wrapper).on("dragend", function() { 
    var preventClick = document.getElementById("preventClick"); 
    preventClick.style.visibility = 'hidden'; 
});

我知道這是遠遠不夠完善，你的文章是從幾個月前，但它爲我工作。希望我可以幫助:)

來源

2014-08-11 17:05:24 Zahnstochermann

HammerJS觸發點擊後dragend

回答

相關問題