使用javascript的Mousedown事件

mousedown event using javascript

本文关键字：事件 Mousedown javascript 使用      更新时间：2023-09-26

我所做的代码是，一旦我点击一个按钮，两个电机将连续旋转，直到我点击一个不同的按钮停止。我希望能够按住按钮来旋转马达，但是一旦松开按钮，马达就会停止运转。

remoteccontrol .php文件的一部分: 

$action = $_GET['action'];
$pin = mysql_real_escape_string($_GET['pin']);
        if ($action == "forward"){
        $setting = "1";
        mysql_query("UPDATE pinStatus SET pinStatus='$setting' WHERE pinNumber='17';");
        mysql_query("UPDATE pinStatus SET pinStatus='$setting' WHERE pinNumber='22';");
        mysql_close();
        header('Location: remoteControl.php'); ..........
........
<form action="remoteControl.php" method="get">
<input id="forward" type="image" src="uparrow.jpg" IMG STYLE="position:absolute; TOP:150px; LEFT:170px; WIDTH:50px; HEIGHT:50px;">
<input type=hidden name="action" value="forward">
</form>

<head>
    <script type="text/javascript">
        function OnButtonDown (button) {
            "can't figure out what to put";
        }
        function OnButtonUp (button) {
            "can't figure out what to put";
        }
        function Init () {
            var button = document.getElementById ("forward");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
                button.addEventListener ("mouseup", function () {OnButtonUp (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", function () {OnButtonUp (button)});
                }
            }
        }
    </script>
</head>
<body onload="Init ()">

当鼠标按下时调用OnButtonDown当鼠标按上时调用OnButtonUp。如果这是工作，唯一的问题是，你不知道该怎么做的功能，以更新你的DB的状态(我想有某种类型的控制器检查DB的状态和更新GPIO状态)。

您需要调用文件remoteccontrol .php(它接受一个GET参数来更新DB)。这可以使用jquery中的ajax函数来完成。

<head>
<!-- First we include jquery library. In this case from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function OnButtonDown (button) {
        //We pass the parameter forward to remoteControl.php
         $.ajax({
            data:  action=forward,
            url:   'remoteControl.php',
            type:  'get',
            success:  function (response) {
            }
         });
    }
    function OnButtonUp (button) {
        //Here the same as in OnButtonDown but passing another parameter
    }
    function Init () {
        var button = document.getElementById ("forward");
        if (button.addEventListener) {  // all browsers except IE before version 9
            button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
            button.addEventListener ("mouseup", function () {OnButtonUp (button)}, false);
        }
        else {
            if (button.attachEvent) {   // IE before version 9
                button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                button.attachEvent ("onmouseup", function () {OnButtonUp (button)});
            }
        }
    }
</script>

相关文章：