是否可以在同一個按鈕上使用mousedown和mouseup事件？

該項目涉及通過局域網控制玩具車。是否可以在同一個按鈕上使用mousedown和mouseup事件？

在我的html頁面上，有5個「按鈕」;上，下，左，右，停。我的代碼是這樣工作的：假設用戶點擊「up」，一個值被髮送到一個php頁面進行處理，並且處理後的字符串被打印在另一個php頁面上供arduino閱讀。

對於汽車停止，用戶必須點擊停止。

<html> 
<head> 
</head> 

<form name="motorform" action="motorboardprocess.php" method="post"> 
<tr><p align='center'><font face="BN machine" size="6" color="royalblue">Motor Shield</font></tr> 
<tr> 
    <input id="forward" type="image" src="up.png" name="forward"> 
</tr> 
<tr> 
    <input id="left" type="image" src="left.png" name="left"> 
    <input id="stop"type="image" src="stop.png" name="stop"> 
    <input id="right" type="image" src="right.png" name="right"> 
</tr> 
<tr>  
    <input id="backward" type="image" src="down.png" name="backward"> 
</tr> 
</form> 
</body> 
</html>

和說PHP ...

<?php 

if (isset($_POST['forward_x'], $_POST['forward_y'])){ 
    $myFile = "mtboardcom.php"; 
    $fh = fopen($myFile, 'w') or die("can't open file");  
    $stringData = "<?php\n"; 
    fwrite($fh, $stringData); 
    $stringData = "echo ".'"<forward>"'."\n"; 
      fwrite($fh, $stringData); 
    $stringData = "?>\n"; 
      fwrite($fh, $stringData); 
    fclose($fh);   
} 

else if (isset($_POST['left_x'], $_POST['left_y'])){ 
    $myFile = "mtboardcom.php"; 
    $fh = fopen($myFile, 'w') or die("can't open file");  
    $stringData = "<?php\n"; 
    fwrite($fh, $stringData); 
    $stringData = "echo ".'"<left>"'."\n"; 
      fwrite($fh, $stringData); 
    $stringData = "?>\n"; 
      fwrite($fh, $stringData); 
    fclose($fh);   
} 
//and so on.....

Arduino的寫着：

<?php 
    echo "<forward>" 
?>

因此問題是，我該如何使用jQuery的從該mousedown和mouseup事件刪除停止'按鈕'。

或者另一種情況：用戶按住按鈕移動汽車並釋放按鈕以停止汽車。

在mousedown上，字符串'forward'被arduino讀取。

mouseup在同一個按鈕上，字符串'stop'被arduino讀取。

來源

2012-12-29 user1925321

當然，您可以在Javascript中訂閱兩個不同的事件。只是掛鉤到事件：

var field = document.getElementsById('#idName'); 

field.onmousedown = function(){ 

} 

field.onmouseup = function(){ 

}

或者jQuery的：

var field = $('#idName'); 

field.mousedown(function(){ 

}).mouseup(function(){ 

});

來源

2012-12-29 18:32:59

使用jQuery，這是非常簡單的：

$('#element').mousedown(function (event) { 
    // process mouse down 
}); 
$('#element').mouseup(function (event) { 
    // process mouse up 
});

你也可以連接他們

$('#element').mousedown(function(event) { 
    /* code */ 
}).mouseup(function (event) { 
    /* code */ 
});

在這些事件中，你可以ping你r調用$.ajax的URL。但請注意，因爲AJAX是異步的，所以如果你不小心的話，你可能會在看比賽條件。因爲他們來自1位客戶，所以您應該沒問題，但可能會有其他問題導致輕微延遲或響應時間出現差異。

來源

2012-12-29 18:36:14 Ktash

您可以使用下面的jquery代碼。增加了一個demo here

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
    <div id='btn' style='width:50px;height:30px;background-color:red'>Click</div> 
    <div id='log'></div> 

<script> 
    $("#btn").mouseup(function(){ 
     $('#log').append('<span style="color:#F00;">Mouse up.</span>'); 
    }).mousedown(function(){ 
     $('#log').append('<span style="color:#00F;">Mouse down.</span>'); 
    }); 

</script> 

</body> 
</html>

來源

2012-12-29 18:37:09 Wolf

'＃log' div未關閉。 – Ktash

謝謝。更新了代碼 – Wolf

是的，你可以捕捉鼠標按下都和mouseup事件，但你需要使用AJAX調用的信息發送到服務器，讓你不這樣做，重新加載頁面回發。

此外，您不會自動獲取與每個mousedown事件對應的mouseup事件。用戶可能會在釋放按鈕之前將鼠標移動到按鈕外部，甚至將其移動到不同的按鈕上。您應該將哪個按鈕存儲在一個Javascript變量中，並捕獲整個頁面的mouseup事件而不是按鈕，並且如果最後一次點擊是在按鈕上發送停止信號。

來源

2012-12-29 18:54:31 Guffa

是否可以在同一個按鈕上使用mousedown和mouseup事件？

回答

相關問題