如何制作mousedown事件以防止单击效果并且仅影响单击被按住答案

【问题标题】：How to make mousedown event to prevent single click effect and only affect click being held如何制作mousedown事件以防止单击效果并且仅影响单击被按住
【发布时间】：2014-09-26 17:50:03
【问题描述】：

由于 jQuery 捕捉，我不得不使用 mousedown 而不是使用可拖动的开始、拖动事件... jQuery UI Support 给了我这个可行的解决方案，但是如果你点击红色块，单击一下......你可以看到黑色指南出现，即使我不喜欢那样。

这是 jQuery UI 团队为我的问题修复的fiddle。

有没有什么办法让它工作，只有在按住点击时单击才不会显示黑线？

这是简单的代码：

$(".block").draggable({
    snap: ".guide",
    snapTolerance: 10,
    stop: function( event, ui) {
        $(".h-line").css("display", "none");
    }
}).on( "mousedown", function(event) {
    $(".h-line").css("display", "block");
});

也许通过设置 setTimeout？但这是正确的解决方案吗？

【问题讨论】：

可能你需要使用.on( "mouseup"...事件而不是stop，比如this
是的，但是点击红色块，看到它显示了线条然后消失了吗？我不希望这种情况发生，当我尝试使用 setInterval 时，snapTolerance 不再适用。
是的，实际上 jQuery UI Support 中的那个人做了 mouseup 的事情，但仍然在考虑点击。
作为快速修复，您也可以使用mousemove，如this
该死的你是个天才！ :) 谢谢格兰迪！如果你愿意，把它作为答案，我会勾选它是正确的。

标签： javascript jquery html jquery-ui

【解决方案1】：

在您的情况下，当您简单地单击“.block”时，您会在 _mousedown 上显示“.h-line”，但不会提高 dragstart，因此 dragstop 不要'不加注。
为了快速修复，您可以像这样使用 mousemove 和 mouseup 事件

$(".block").draggable({
    snap: ".guide",
    snapTolerance: 10
}).on( "mousedown", function() {
    this.t = true;
}).on( "mouseup",function(){
    this.t = false;
    $(".h-line").css("display", "none");
}).on("mousemove", function(){
    if(this.t && $(".h-line:visible").length === 0)
        $(".h-line").css("display", "block");
});

sample on fiddle

【讨论】：