Question

我通常不会提问，因为我通常可以通过研究找到答案，但我仍然坚持这个问题。这是我想要做的。我试图模拟手指滑动，但用鼠标。我有一个图像，图像地图点是一个链接。在进行正常点击时，我需要此链接可点击。我首先尝试使用mousedown和mouseup事件。就触发我的滑动功能而言，这是完美的，但我的问题是，当通过链接释放拖动时，我无法阻止点击事件。然后我尝试使用ondragstart和ondragend，这可以阻止点击在拖动时触发，但现在我的滑动功能没有触发。我还需要保持图像不被实际拖动，这就是我为什么要做的＆＃34;返回false＆＃34;在dragstart事件上。我也试图实现一种检测鼠标是否被拖动一定距离的方法，以解释正常点击时鼠标的轻微移动。我在这里走在正确的轨道上吗？有没有更好的方法呢？我很感激任何建议。以下是我的代码示例：

HTML：

<div id="imgWrapper">


<img id="thisImage"     src="https://s10.postimg.org/sna4a9pgp/example.png" usemap="#thisMap">
</div>

<map name="thisMap">
<area shape="rect" coords="235,207,406,250" href="javascript:void(0);" onclick="thisAlert()" />
</map>

和Javascript：

var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;

var thisAlert = function() {
  alert("Link Clicked");
};

document.getElementById('thisImage').ondragstart = function(event) { 
    startX = event.pageX;
    startY = event.pageY;
    return false;
};    

document.getElementById('thisImage').ondragend = function(event) { 
    endX = event.pageX;
    endY = event.pageY;
    alert(endX);
    // Swipe Up
    if (startY - endY > 20) {
      alert("Swipe up");
    };
};

Codepen示例：http://codepen.io/Williz/pen/kXQqRB

PS。我也在使用Jquery，如果这有帮助的话。

拖放以模拟图像上的滑动

0 个答案: