是否可以在同一按钮上使用Mousedown和MouseUp事件

这个项目涉及在LAN上控制玩具车。

在我的HTML页面上，有5个"按钮"；向上，向下，向左，右，停止。我的代码工作是这样的：说用户单击"向上"，将一个值发送到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 = "<?phpn";
    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 = "<?phpn";
    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读取。

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

var field = document.getElementsById('#idName');
field.onmousedown = function(){
}
field.onmouseup = function(){
}

或jQuery：

var field = $('#idName');
field.mousedown(function(){
}).mouseup(function(){
});

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

是的，您可以同时捕获Mousedown和MouseUp事件，但是您需要使用Ajax调用将信息发送到服务器，以便您不做重新加载页面的寄回。

另外，您不会自动获得与每个Mousedown事件相对应的MouseUP事件。用户可能在释放按钮之前将鼠标移到按钮外面，甚至将其移至其他按钮。您应该将哪个按钮存储在JavaScript变量中，并捕获整个页面的MouseUp事件，而不是为按钮，如果上次点击在按钮上，请发送停止信号。

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

相关内容

最新更新

热门标签：