如何在執行多個事件時執行代碼， 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，而鼠標點擊

回答

相關問題