触发点击并按住事件(Trigger Click-and-Hold Event)

题：

使用jQuery，我怎么可以模仿点击和保持的事件吗？

---

我目前打我的头靠在墙上，似乎无法弄清楚如何去这个问题！

我也曾尝试在谷歌和搜索的论坛，但都无济于事。

在我目前的例子中，我使用jQuery UI的.draggable()

理想情况下，我想做到以下几点：

• 执行上点击/鼠标按下div 。
• 模仿点击和保持事件，并能够自由移动的元素。
• 在接下来的点击/鼠标按下，最终点击并按住事件。

当我尝试的功能，如：

$("#drag").draggable().mousedown(function(e){
    e.preventDefault();
    return $(this).mousedown();
});

然后，它会导致一个无限循环，这将最终导致浏览器崩溃。 但是，我不知道人们会如何去启动一个恒定.mousedown()事件。

这里是什么，我现在有一个演示： http://jsfiddle.net/vPruR/16/ 。

任何帮助将不胜感激！

Answer 1:

我不认为有一些选项来模拟点击和保持。 此外，它可能会产生过多的浏览器的依赖。

所以，你可以尝试下面的东西。

var click = false,
top = null,
left = null;

$(document).bind('mousemove', function (e) {
   if (click == true) {
      $('#drag').css({
         left: e.pageX - left,
         top: e.pageY - top
       });
    }
});

$('#drag').draggable().click(function(e) {
    top = e.pageY - $('#drag').position().top; 
    left = e.pageX - $('#drag').position().left;
    click = !click;
    return false;
});

$('html').click(function() {
    click = false;
});

DEMO： http://jsfiddle.net/dirtyd77/qbcQn/

Answer 2:

狼和DOM的解决方案工作的伟大，并且是我的解决方案的基础，但你提到你正在使用jQuery用户界面的draggable ，所以这里使用jQuery UI的一个可能的解决方案draggable对象与一起droppable 。 我试图让可放开的事件，火灾时可拖动拖过他们，并开始思考了，所以我利用的内置/私有函数ui.mouse对象draggable从继承并重写。

$(document).ready(function(){
      var click = false

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#drag').data('uiDraggable')._mouseDrag(e);
        }
    });

    $('#drag').draggable().click(function(e) {
        if(!click){
            $(this).data('uiDraggable')._mouseCapture(e, true)
            $(this).data('uiDraggable')._mouseStart(e, true, true);
        }else{
            $(this).data('uiDraggable')._mouseUp(e);
            $(this).data('uiDraggable')._mouseStop(e);
        }
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

继承人小提琴 。 要查看可放开的东西，只是取消注释在JS可放开的东西。

注：该解决方案是当前jQuery UI的版本（1.9.2），但在未来的版本中可能会改变，因为它并使用私人电话。

文章来源: Trigger Click-and-Hold Event