Question

问题：

使用jQuery，我如何模仿点击并保持事件？

我目前正撞墙而无法弄清楚如何解决这个问题！

我也试过在谷歌和论坛上搜索，但无济于事。

在我当前的示例中，我使用的是jQuery UI .draggable()。

理想情况下，我想执行以下操作：

在div上执行点击/下载。
模仿点击并保持事件，并能够自由移动元素。
点击下一个/ mousedown，结束点击并暂停活动。

当我尝试以下功能时：

$("#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

Wolf和Dom的解决方案运行良好，是我解决方案的基础，但是你提到你使用的是jquery ui的draggable，所以这里有一个可能的解决方案，使用jquery ui的draggable对象和droppable。当一个拖拽拖过它们并放在它们上面时，我试图让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;
    });
});

继承人fiddle。要查看可放置的内容，只需取消注释js中的可放置内容即可。

注意：此解决方案适用于当前的jquery ui版本（1.9.2），但在将来的版本中可能会更改，因为它确实使用私有调用。

触发点击并保持事件

问题：

2 个答案: