如何檢測Mousedown + Mousemove的左右方向

你可以看看這個演示，讓我知道我可以檢測mousemove是否向左或向右？如何檢測Mousedown + Mousemove的左右方向

$('.container').mousedown(function(){ 
 
    $(this).mousemove(function(){ 
 
     //if Moves Left { console.log("Moving Left"); } 
 
     //if Moves Right { console.log("Moving Right"); } 
 
    }); 
 
});  
 
    $('.container').mouseup(function(){ 
 
    $(this).unbind("mousemove"); 
 
});

.container { 
 
    height:200px; 
 
    width:200px; 
 
    background-color:#1abc9c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div>

來源

2015-10-03 Suffii

絕對一個關閉許多解決方案：

$('.container').mousedown(function(e1){ 
    var mx = e1.pageX;//register the mouse down position 

    $(this).mousemove(function(e2){ 

     if (e2.pageX > mx){ //right w.r.t mouse down position 
      console.log("Moved Right"); 
     } else { 
      console.log("Moved Left") 
     } 
    }); 
});  
    $('.container').mouseup(function(){ 
    $(this).unbind("mousemove"); 
});

工作代碼here

來源

2015-10-03 07:24:37 Cyril

這會查看鼠標是否位於開始（鼠標向下）位置的左側或右側。如果您想知道它是左右移動，您必須在鼠標移動中更新mx。 – Lenny

當我回答的時候，在我腦海中的那一瞬間，但問題並沒有指出它是否必須相對於當前位置或相對於他放下鼠標時的點。 – Cyril

$('.container').mousedown(function(e){ 
 
    var prevX = e.clientX; 
 
    $(this).mousemove(function(e){ 
 
     
 
     if(e.clientX < prevX) { console.log("Moving Left"); } 
 
     if(e.clientX > prevX) { console.log("Moving Right"); } 
 
     prevX = e.clientX; 
 
    }); 
 
});  
 
    $('.container').mouseup(function(){ 
 
    $(this).unbind("mousemove"); 
 
});

.container { 
 
    height:200px; 
 
    width:200px; 
 
    background-color:#1abc9c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div>

來源

2015-10-03 07:26:05 Lenny

如何檢測Mousedown + Mousemove的左右方向

回答

相關問題