如何在执行多个事件时执行代码， mousemove，而鼠标点击

基本上我需要一些代码来执行，当鼠标被点击并拖动。使用我当前的代码，代码在鼠标关闭时以及鼠标移动后执行，但当鼠标单击被释放后，代码将继续执行，因此我已经包含if语句。我敢肯定有这样做的更有效的方式，所以任何帮助将非常感激:)如何在执行多个事件时执行代码， mousemove，而鼠标点击

PS另一个问题，我有说是用户点击元素，然后让我们去mouseup（“/ /更多的代码“）被执行一次，但如果用户再次点击并放开它将被执行两次，如果他们再次选择和取消选择3次等

正如你可以告诉我有点jQuery菜鸟！：P

当前代码：

$('element').mousedown(function(event){ 
    mouseDown = true; 
    $(document).mousemove(function(event2){ 
    if(mouseDown){ 
     //code goes here 
    } 
    }).mouseup(function(){ 
    mouseDown = false; 
     //more code 
    }); 
});

来源

2011-09-06 Andrew Marshall

“我有另外一个问题是说，在元素上的用户点击，然后放开鼠标松开（” //更多代码“）被执行一次但如果用户再次点击并放开，它将被执行两次，如果他们再次选择并取消选择等等。“

这是因为你每次按下鼠标都要绑定一个事件;第一次发生，你有一个事件处理程序。下一次，两个事件处理程序。第三次，三个事件处理程序。等等。您需要事先调用unbind()以删除现有的事件处理程序，然后重新绑定它们。

来源

2011-09-06 11:44:17

我最近使用下面的代码来创建一个可拖动的jQuery扩展。您可以传递拖动动作的目标。

(function ($) { 
    var element; 
    var target; 
    var settings = { 
     onDrop: function (x, y) { } 
    }; 

    var methods = { 
     init: function (options) { 
      if (options) { 
       $.extend(settings, options); 
      } 
      return this.each(function() { 
       // Code here for each element found by the selector 
       element = $(this); 

       if (options.target) { 
        target = $(options.target); 
       } 
       else { 
        target = element; 
       } 
       // Move the element by the amount of change in the mouse position 
       element.parent().mousedown(function (event) { 

        element.data('mouseMove', true); 
        element.data('mouseX', event.clientX); 
        element.data('mouseY', event.clientY); 
       }); 

       element.parents(':last').mouseup(function() { 
        element.data('mouseMove', false); 
       }); 

       element.mouseout(methods.move); 
       element.mousemove(methods.move); 


      }); 

     }, 
     move: function (event) { 
      if (element.data('mouseMove')) { 
       var changeX = event.clientX - element.data('mouseX'); 
       var changeY = event.clientY - element.data('mouseY'); 

       var newX = parseInt(target.css('margin-left')) + changeX; 
       var newY = parseInt(target.css('margin-top')) + changeY; 


       target.css({ 'margin-left': newX, 'margin-top': newY }); 

       settings.onDrop(newX, newY); 
       element.data('mouseX', event.clientX); 
       element.data('mouseY', event.clientY); 
      } 
     } 
    }; 

    $.fn.draggable = function (method) { 

     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.draggable'); 
      return null; 
     } 

    }; 
})(jQuery);

然后调用它像这样：

$('#overlay').draggable({ target: "#imagebehide", onDrop: function (x, y) { 
      $('#leftpos').val(x); 
      $('#toppos').val(y); 

     } });

来源

2011-09-06 11:46:58 Richard

如何在执行多个事件时执行代码， mousemove，而鼠标点击

回答

相关问题