使用javascript的mousedown事件

时间:2013-04-14 01:22:32

标签: php javascript raspberry-pi gpio

我正在处理的代码是,一旦我点击一个按钮,两个电机将持续旋转,直到我按下另一个按钮停止。我希望能够按住一个按钮来旋转电机,但是一旦松开按钮,电机就会停止。

我的remoteControl.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>

JavaScript我正努力工作:

<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 ()">

1 个答案:

答案 0 :(得分:1)

当鼠标停止时,您调用OnButtonDown,当它启动时,您调用OnButtonUp。如果这样做,唯一的问题是你不知道该怎么做以便用状态更新你的数据库(我想有某种控制器可以检查数据库上的状态并更新GPIO状态)。

您需要调用remoteControl.php文件(它使用GET参数来更新数据库)。 这可以使用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>