Javascript 如何在执行多个事件时执行代码，即单击鼠标时移动鼠标

基本上我需要一些代码来执行当鼠标被点击和被拖动。在我的当前代码中，当鼠标按下和移动鼠标时，代码将执行，但当鼠标单击被释放时，代码将继续执行，因此我包含了一个if语句。我相信有一种更有效的方法可以做到这一点，因此我们非常感谢您的帮助：）

另一个我遇到的问题是，用户单击元素，然后释放鼠标，鼠标（//更多代码）执行一次，但如果用户再次单击并释放鼠标，鼠标将执行两次，如果用户再次选择并取消选择鼠标，则执行三次，等等

正如你可能知道的那样，我有点像jquerynoob！：P

当前代码：

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

“我遇到的另一个问题是，用户单击元素， 然后让我们走，mouseup（//更多代码）执行一次，但是如果 然后用户再次单击并释放它将执行两次，如果 他们再次选择和取消选择3次，以此类推。”

这是因为每次他们按下鼠标时，你都在绑定一个事件；第一次发生时，您有一个事件处理程序。下一次，两个事件处理程序。第三次，三个事件处理程序。等等您需要事先调用

unbind（）

，删除现有的事件处理程序，然后重新绑定它们

“我遇到的另一个问题是，用户单击元素， 然后让我们走，mouseup（//更多代码）执行一次，但是如果 然后用户再次单击并释放它将执行两次，如果 他们再次选择和取消选择3次，以此类推。”

---

这是因为每次他们按下鼠标时，你都在绑定一个事件；第一次发生时，您有一个事件处理程序。下一次，两个事件处理程序。第三次，三个事件处理程序。等等您需要事先调用

unbind（）

来删除现有的事件处理程序，然后重新绑定它们。

我最近使用了以下代码来创建一个可拖动的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);

        } });

---

我最近使用以下代码创建了一个可拖动的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);

        } });