Question

我在这里很长一段时间都是潜伏者，现在出现了一个我无法解决的问题。

这是一个简单的#viewport和.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()放在所有地方，但是当我放开鼠标时，我似乎无法防止链接被触发。

Answer 1

首先，您需要对链接的点击事件进行e.preventDefault()，因为这是您想要阻止的默认值。

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

修改

智能解决方案是链接不是双重目的 - 即。从超链接功能中分离拖动功能。但是，如果这是不可能的，那么这是一个建议的策略：

使用仅执行e.preventDefault()。
的处理程序抑制超链接操作
可靠地运行190px的可拖动性。

在mousedown上，阅读并存储链接位置。

在mouseup上，if（位置已更改）什么也不做;否则模拟超链接动作。

带有onclick事件的子进程的jQuery dragscroller ---无法让它们在拖动时停止触发

1 个答案:

修改