1

该项目涉及通过 LAN 控制玩具车。

在我的 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事件来删除停止“按钮”。

或者另一种场景：用户按住按钮移动汽车，松开按钮停止汽车。

On ， arduino 读取mousedown一个字符串。'forward'

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

4

4 回答 4

1

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

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

field.onmousedown = function(){

}

field.onmouseup = function(){

}

或者对于 jquery：

var field = $('#idName');

field.mousedown(function(){

}).mouseup(function(){

});
于 2012-12-29T18:32:59.177 回答
0

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

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

于 2012-12-29T18:54:31.790 回答
0

使用 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 您的 URL $.ajax。但请注意，由于 AJAX 是异步的，如果您不小心，可能会看到竞争条件。因为它们来自 1 个客户，所以您应该没问题，但可能还有其他问题可能导致轻微延迟或响应时间差异。

于 2012-12-29T18:36:14.827 回答
0

您可以使用以下 jquery 代码。在这里添加了一个演示

    <!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-29T18:37:09.057 回答