如何追踪mousepress事件? [英] How to track mousepress event?

问题描述

我有一个可拖动的栏，效果很好. https://jsfiddle.net/c2cqxcf8/2/ 但是，如果我们将其拖动到右侧边框，然后向上拖动鼠标，然后尝试将其拖动到栏外，将最近的按钮与鼠标交叉，然后将鼠标移回栏内，则会看到应该通过mouseup事件取消绑定的mousemove事件未解除绑定，并且mousemove出于某种原因起作用.因此，我尝试跟踪何时按下鼠标，这是让mousemove工作的唯一方法，但到目前为止该代码仍无法解决我的问题.各位，我依靠您的帮助，我需要检测何时按下了鼠标，只有在这种情况下，才能让mousemove工作并移动我的工具栏.谢谢！

这是JS，您可以在上面的链接中看到整个文档.

 var info;
var dest;
var result;
var between = 0;
var mouseDown = 0;
$('.bar-button').on('mousedown', function(event){
    mouseDown = 1;
    info = event.pageX;
    if(mouseDown == 1) {
        $(document).on('mousemove', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })
    }
            $(document).on('mouseup', function(){
                mouseDown = 0;
                $(document).unbind();
                between = result;
            })
})
 

解决方案

我会考虑同时使用 dragstart ， drag 和 dragend 事件与您的 mousedown ， mousemove 和 mouseup 一起.

我已将此添加到您的代码中

$('.bar-button').on('dragstart', function(event){

    info = event.pageX;

        $(document).on('drag', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })

            $(document).on('mouseup', function(){

                $(document).unbind();
                between = result;
            });
    $(document).on('dragend', function(){

                $(document).unbind();
                between = result;
            });
});

为了给您一个想法，我在这里 https://jsfiddle.net/db5dLst2 >

它包含一些重复的代码作为概念证明，但可以很好地将其重构为函数来避免这种情况.

I have a draggable bar and it works well. https://jsfiddle.net/c2cqxcf8/2/ But if we drag it to the right border then up the mouse and try to drag it beyond the bar, crossing closest button with mouse and get the mouse back within bar, we see that mousemove event that supposed to be unbinded with help of mouseup event is not unbined and mousemove works for some reason. So i tried to track when mouse is pressed ,that is the only thing letting mousemove work but that code doesn't solve my problem so far. I count on your help, guys, i need to detect when mouse is pressed and only in that case let mousemove work and move my bar. Thanks!

This is JS and the entire document you can see in link above.

var info;
var dest;
var result;
var between = 0;
var mouseDown = 0;
$('.bar-button').on('mousedown', function(event){
    mouseDown = 1;
    info = event.pageX;
    if(mouseDown == 1) {
        $(document).on('mousemove', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })
    }
            $(document).on('mouseup', function(){
                mouseDown = 0;
                $(document).unbind();
                between = result;
            })
})

解决方案

I would consider using dragstart, drag, and dragend events together with your mousedown, mousemove and mouseup ones.

I added this to your code:

$('.bar-button').on('dragstart', function(event){

    info = event.pageX;

        $(document).on('drag', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })

            $(document).on('mouseup', function(){

                $(document).unbind();
                between = result;
            });
    $(document).on('dragend', function(){

                $(document).unbind();
                between = result;
            });
});

To give you an idea I have forked your fiddle here https://jsfiddle.net/db5dLst2

It contains some duplicated code as a proof of concept but it can be nicely refactored into functions to avoid this.

这篇关于如何追踪mousepress事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！