在mousedown期间查找鼠标位置是否发生了变化

时间:2013-03-07 14:05:05

标签: javascript jquery html backbone.js web

我有一个文本,当我长按鼠标按钮(700毫秒)时,我将激活该文本的文本编辑器。在此期间(按下鼠标时),我必须检查鼠标位置是否已移动。问题是,我只有一个事件,鼠标按下事件。

如何确定鼠标是否被移动? 我试图接受一个新的事件,但我是jquery的初学者,所以我无法达到我想要的目标。

这是我得到活动的功能。

  onTaskItemMouseDown: function (event) {

        // We only check the left click
        if (event.button !== 0) { return true; }

        var that = this,
            initialX = event.pageX,
            initialY = event.pageY;

        // Set timeout
        console.log("x=" + initialX);
        console.log("y=" + initialY);
        this.pressTimer = window.setTimeout(function () {


            clearTimeout(that.pressTimer);
            that.pressTimer = 0;
            that.onEditTask(event, that.$(event.currentTarget).closest(".task").find(".dropdown-container").data("task-id"));
        }, MindomoUtils.longClickDuration);

        return true;
    },

1 个答案:

答案 0 :(得分:1)

您可能正在寻找mousemove事件。

我可以看到你已经在使用jQuery了,所以这里有一个例子。

输出HTML

<ul class="output"></ul>

的jQuery

$(document).on('mousedown', onMouseDown)
$(document).on('mousemove', onMouseMove)
$(document).on('mouseup', onMouseUp)

var mouseIsDown = false

function onMouseDown(event) {
    // set boolean true
    mouseIsDown = true
    $('.output').append($('<li>').text('Mouse down - x: ' + event.pageX + ' y: ' + event.pageY))
}

function onMouseMove(event) {
    if(mouseIsDown) {
        $('.output').append($('<li>').text('Mouse moving - x: ' + event.pageX + ' y: ' + event.pageY))
    }
}

function onMouseUp(event) {
    // set boolean false again
    mouseIsDown = false
    $('.output').append($('<li>').text('Mouse up - x: ' + event.pageX + ' y: ' + event.pageY))
}

Here you can play with it yourself.