jQuery-将多个函数绑定到一个事件，但区分函数的执行

我有两个不同的函数绑定到一个元素和事件，基本上它们被称为“mousedown”

我正试图找到一种方法，允许我的元素“调整大小”或“移动/拖动”，但不能同时进行

现在我正在使用一个“setTimeout”函数，当调用“resize”函数时，该函数会被清除，这样我就取消了“move/drag”函数。它能工作，但一点也不好

我需要帮助找出更好的方法。非常感谢您的建议。

var timer= "",
    resize_select = false;

$('element').resize(function() {
    resize_select = true;
    //do stuff, called every resize, just like resizing <textarea> 
    window.clearTimeout(timer);
});

$('element').on("mousedown", function() {
    $(this) = $this;
    resize_select = false;

    if (resize_select === false) {
        timer = setTimeout(function() {
            $this.addClass('dragable');
        }, 500);
    }

    $(document).on("mousemove", function(e) {
        $('.dragable').css({
            top: e.pageY,
            left: e.pageX
        });
    });
});

$(document).on('mouseup', function() {
    resize_select = false;
    $('.resize').removeClass('dragable');
});

var timer=“”，
resize_select=false；
$（'element'）。调整大小（函数（）{
resize_select=true；
//做一些事情，称为每次调整大小，就像调整大小一样
清除超时（计时器）；
});
$（'element'）。在（“mousedown”，function（）上{
$（this）=$this；
resize_select=false；
如果（调整大小_选择===false）{
计时器=设置超时（函数（）{
$this.addClass（'dragable'）；
}, 500);
}
$（文档）.on（“mousemove”，函数（e）{
$（'.dragable'）.css({
上图：e.pageY，
左：e.pageX
});
});
});
$（document）.on（'mouseup'，function（）{
resize_select=false；
$（'.resize'）.removeClass（'dragable'）；
});

我使用Ben Alman的“jQuery resize事件”允许任何元素绑定到.resize（）

是我目前所在位置的一个缩影

---

已更新

$('.resize').css({
    resize:'both',
    overflow:'hidden'
});

$('.resize').on('mousedown', function(event) {
    var $this = $(this),
        $this_height = $this.height(),
        $this_width = $this.width(),
        x = event.pageX - $this.offset().left,
        y = event.pageY - $this.offset().top,
        xx = $this_width - 10,
        yy = $this_height - 10,
        img_num = $(this).index();

    event.preventDefault();

    if (xx - x > 0 || yy - y > 0) {
        $(document).mousemove(function(pos) {
            var thisX = pos.pageX - $this_width / 2,
                thisY = pos.pageY - $this_height / 2;

            $this.offset({
                left: thisX,
                top: thisY
            })
        });
    }

    if (xx - x < 0 && yy - y < 0) {
        $(document).mousemove(function(pos) {
            var thisX = pos.pageX - $this.offset().left,
                thisY = pos.pageY - $this.offset().top,
                ratio = ((thisX + thisY) / 2) / (($this_height + $this_width) / 2),
                height_new = $this_height * ratio,
                width_new = $this_width * ratio;

            $this.css({
                'width': width_new,
                'height': height_new
            });
        });
    }
});

$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

$（'.resize'）.css({
调整大小：'两个'，
溢出：'隐藏'
});
$（'.resize'）。on（'mousedown'，函数（事件）{
变量$this=$（this），
$this_height=$this.height（），
$this_width=$this.width（），
x=event.pageX-$this.offset（）。左，
y=event.pageY-$this.offset（）.top，
xx=$此宽度-10，
yy=$此高度-10，
img_num=$（this）.index（）；
event.preventDefault（）；
如果（xx-x>0 | yy-y>0）{
$（文档）.mousemove（函数（pos）{
var thisX=位置pageX-$this_width/2，
thisY=位置pageY-$此高度/2；
$this.offset({
左：thisX，
上图：thisY
})
});
}
if（xx-x<0&&yy-y<0）{
$（文档）.mousemove（函数（pos）{
var thisX=pos.pageX-$this.offset（）.左，
thisY=pos.pageY-$this.offset（）.top，
比率=（（thisX+thisY）/2/（$此高度+此宽度）/2），
高度新=$此高度*比率，
宽度\新=$此\宽度*比率；
$this.css({
“宽度”：宽度\u新，
“高度”：新高度
});
});
}
});
$（document）.on（'mouseup'，function（）{
$（文档）.unbind（'mousemove'）；
});

这是因为@jfriend00的想法是找出“mousedown”事件在每个元素中发生的位置，@jeremyc提供了各种优化

---

你根本不需要计时器。这至少可以在Chrome上运行，我会在所有浏览器中进行测试以确保安全。给你：

var img_amount = $('.resize').length,
    height_org = new Array(),
    width_org = new Array(),
    resize_select = false,
    timer = "";

for (var i = 0; i < img_amount; i++) {
    height_org[i] = $('.resize:eq(' + i + ')').height();
    width_org[i] = $('.resize:eq(' + i + ')').width();
}

//set div width to div height * ratio to preserve aspect ratio
$('.resize').resize(function(event){
    var img_num = $(this).index(),
        height_new = $(this).height(),
        ratio = height_new / height_org[img_num],
        width_new = width_org[img_num] * ratio;

    $(this).css('width', width_new);
});

$('.resize').on('mousedown', function(event) {
    //prevent typical browser behaviour of dragging the div as an image
    event.preventDefault();

    //set z-index so the div you are dragging is in front
    $('.resize').css('z-index', 1);
    $(this).css('z-index', 2);

    $(this).mousemove(setPos);
});

$('.resize').on('mouseup', function() {
    $(this).unbind('mousemove', setPos);
});

function setPos(event) {
    var thisX = event.pageX - $(this).width() / 2;
    var thisY = event.pageY - $(this).height() / 2;
    $(this).offset({
        left: thisX,
        top: thisY
    });
}

var img_amount=$（'.resize'）。长度，
高度组织=新数组（），
宽度组织=新数组（），
resize_select=false，
计时器=”；
对于（变量i=0；i

---

编辑：我添加了resize函数来限制css“resize:vertical”的纵横比，但是看起来有点跳跃。要使它真正平滑，我会说在每个div的右下角创建您自己的调整命中区域，向其中添加png以模拟浏览器调整大小句柄，然后创建您自己的拖动调整大小功能，而不是使用css调整大小。

您只需要有一个事件处理程序，然后使用其中的代码来决定要执行的其他功能。试图从不同的事件处理程序中取消其他事件处理程序的执行并不容易，如果其中一个事件处理程序延迟计时器的决定，这是不可能的。@jfriend00我理解，感谢您的回复。我只是不知道该怎么做。如果您对如何在浏览器中检测“调整大小”有任何建议或参考，我可以找到答案。您确定是调整大小还是拖动的标准是什么？我猜这与鼠标向下发生的位置有关（在对象的中间或边缘）。如果是这样的话，你就不能根据初始鼠标事件发生的位置在mousedown上设置一个标志，然后在该标志发生后的mousemove事件中，你可以查看该标志并决定如何处理移动事件。@jfriend00非常非常好的主意。。。谢谢大家!+1在Chrome/FF/IE9中工作，但是您似乎删除了调整大小时用来保持纵横比的

处理程序。@Jeremy C相信您删除了所有调整大小功能。。。想要调整大小并移动，但不能同时进行。我会将其添加回，但不知道您是r