0

我在这里潜伏了很长时间，现在遇到了一个我真的无法解决的问题。

这是一个简单的#viewportand .canvas，它.canvas是超宽的并且#viewport有overflow:hidden：

<div id="viewport">
    <div class="canvas">
        <a href="#" onclick="alert('event fired, boo.')">do not fire on mouse up</a>
    </div>
</div>

使用我在这里的代码，我用 jQuery 创建了一个拖动滚动器，所以当您单击#viewport并拖动它时，它会滚动内容，然后将其捕捉到最接近的 190 像素倍数（不相关，但那里的人可能想要我的代码）

$("html").mouseup(function(e) {
    down = false;
    $("#viewport").animate({scrollLeft:(190 * Math.round($("#viewport").scrollLeft() / 190))}, 150);
});
$("#viewport").mousedown(function(e) {
    e.preventDefault();
    down = true;
    x = e.pageX;
    left = $(this).stop().scrollLeft();
});
$(document).mousemove(function(e) {
    if (down) {$("#viewport").scrollLeft(left - e.pageX + x);}
});

我想要做的就是开始拖动链接，当我使用鼠标时，我只需要不触发链接。

我尝试e.preventDefault()过到处放置，但是当我松开鼠标时，我似乎无法阻止链接触发。

4

1 回答 1

0

首先，您需要处理e.preventDefault()链接的点击事件，因为这是您要阻止的默认事件。

其次，执行上述操作不会阻止alert('event fired, boo.')，因为附加在 javascript 中的单击处理程序将在附加在 HTML中的单击处理程序之后e.preventDefault()触发，并且为时已晚。您可以安全地onclick="alert('event fired, boo.')"从 HTML 中删除。

编辑

一个聪明的解决方案是链接不是双重用途的 - 即。将拖拽功能与超链接功能分开。但是，如果这是不可能的，那么这里有一个建议的策略：

  • 使用仅执行e.preventDefault().
  • 通过 190px 获得可拖动性可靠地工作。
  • 在鼠标按下时，读取并存储链接位置。
  • 在 mouseup 上， if(position has changed) 什么都不做；否则模拟超链接动作。
于 2012-09-12T01:50:10.873 回答