如何让mouseup在mousemove完成后触发 [英] How to get mouseup to fire once mousemove complete

问题描述

看起来，mouseup事件只有在不与mousemove结合时才会被触发。换句话说，按下鼠标左键并放开，mouseup被触发。但是，如果拖动图像然后放开，则不会触发鼠标悬停。以下是一个显示此行为的示例：

 < script src =http://ajax.googleapis.com/ajax /libs/jquery/1.3.2/jquery.min.js\"></script> 
< div id =Out> 
< img id =Imgsrc =http://sstatic.net/so/img/logo.pngwidth = 500> 
< / div> 
< script language = JavaScript> 
 $（function（）{
 $（document）.bind（mouseup，function（）{alert（UP）;}）; 
 // $（＃Out ）.bind（mouseup，function（）{alert（UP）;}）; 
 // $（＃Img）。bind（mouseup，function（）{alert（ UP）;}）; 
}）; 
< / script> 
  

如果你加载这个，点击放开，UP将会提示。但是，如果您拖动然后松手，则不会触发UP。

如何在mousemove完成时触发mouseup，或者如何检查mousemove事件确定鼠标左键现在关闭？

解决方案

这是一个我使用 alot 的模式，在涉及鼠标移动的所有事情上一般都会很好地工作。当用户点击mousedown时，mouseup事件被绑定，当用户放开鼠标按钮时，无论它移动多少，这都会强制触发。

  $（'＃element'）。mousedown（function（e）{
 
 //您可以用
记录起始位置var start_x = e.pageX; 
 var start_y = e.pageY; 
 
 $（）。mousemove（function（e）{
 //你可以得到距离
 var offset_x = e.pageX  -  start_x; 
 var offset_y = e.pageY  -  start_y; 
 
 return false; 
}）; 
 
 $（）。 ）; $ b $（）。unbind（）; 
}）; $ b（'mouseup'，function（）{
 alert（this will show after after mousemove and mouse released。 
 $ b //使用return false可防止浏览器的默认设置，
 //通常不需要的mousemove操作（拖放）
返回false; 
}）; 
  

It seems that mouseup events are only fired when they are not in conjunction with a mousemove. In other words, push down on the left mouse button and let go, and mouseup is fired. But if you drag across the image and then let go, no mouseup is fired. Here is an example that shows this behavior:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="Out">
    <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500>
</div>
<script language=JavaScript>
    $(function() {
        $(document).bind("mouseup",function() {alert("UP");});
        //$("#Out").bind("mouseup",function() {alert("UP");});
        //$("#Img").bind("mouseup",function() {alert("UP");});
    });
</script>

If you load this, and click and let go, "UP" will alert. However, if you drag and then let go, no UP is fired.

How can I have mouseup fire when mousemove is completed, or how can I inspect the mousemove event to determine that the left mouse button is now off?

解决方案

This is a pattern I use alot, works generally very well on all things relating to mousemove. The mouseup event is binded when the user clicks mousedown, this forces it to fire when the user lets go of the mouse button, no matter how much it's moved.

$('#element').mousedown(function(e) {

    // You can record the starting position with
    var start_x = e.pageX;
    var start_y = e.pageY;

    $().mousemove(function(e) {
        // And you can get the distance moved by
        var offset_x = e.pageX - start_x;
        var offset_y = e.pageY - start_y;

        return false;
    });

    $().one('mouseup', function() {
        alert("This will show after mousemove and mouse released.");
        $().unbind();
    });

    // Using return false prevents browser's default,
    // often unwanted mousemove actions (drag & drop)
    return false;
});

这篇关于如何让mouseup在mousemove完成后触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！