是否有可能使用鼠标按下和鼠标松开事件在同一按钮上？(Is it possible to use th

该项目涉及控制在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 = "<?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>"
?>

所以，问题是，我该如何利用的mousedown和mouseup从jQuery的事件，除去停止“按钮”。

或者另外一种情况：用户按下按钮，动车和释放按钮，把车停下来。

在mousedown ，字符串'forward'是由Arduino的读取。

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代码。增加了一个演示在这里

    <!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 3:

是的，你可以捕捉鼠标按下都和mouseup事件，但你需要使用AJAX调用的信息发送到服务器，让你不这样做，重新加载页面回发。

此外，你不自动获得对应于每个鼠标按下事件mouseUp事件。用户可能释放按钮之前移动的按钮之外的鼠标，甚至将其移动到不同的按钮。你应该存储在一个JavaScript变量哪个按钮被按下，并赶上MouseUp事件对于整个页面，而不是为按钮，如果最终点击的是一个按钮来发送停止信号。

Answer 4:

使用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与您的网址$.ajax调用。但千万注意，因为AJAX是异步的，你可以在比赛条件看，如果你不小心。因为它们是从1个客户来了，你应该罚款，但也可能有，可能导致轻微的延迟或差异响应时间等问题。

文章来源: Is it possible to use the mousedown and mouseup event on the same button?