Question

该项目涉及通过局域网控制玩具车。

在我的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上，arduino读取字符串'forward'。

mouseup在同一个按钮上，字符串'stop'由arduino读取。

Answer 1

当然，您可以在Javascript中订阅两个不同的事件。只是挂钩事件：

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

field.onmousedown = function(){

}

field.onmouseup = function(){

}

或者对于jquery：

var field = $('#idName');

field.mousedown(function(){

}).mouseup(function(){

});

Answer 2

使用jQuery，这非常简单：

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

您也可以使用

链接它们

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

在这些活动期间，您可以通过$.ajax电话ping您的网址。但要注意，因为AJAX是异步的，如果你不小心，你可能会看到竞争条件。因为他们来自一个客户，你应该没事，但可能会有其他问题可能导致轻微的延迟或响应时间的差异。

Answer 3

您可以使用以下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>

Answer 4

是的，您可以捕获mousedown和mouseup事件，但是您需要使用AJAX调用将信息发送到服务器，这样您就不会进行重新加载页面的回发。

此外，您不会自动获取与每个mousedown事件对应的mouseup事件。用户可能会在释放按钮之前将鼠标移动到按钮外部，甚至可以将其移动到其他按钮。您应该在Javascript变量中存储按下了哪个按钮，并捕获整个页面的mouseup事件而不是按钮，并在最后一次单击按钮时发送停止信号。

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

4 个答案: