初识 jquery.simulate.js 模拟键盘事件

用jquery 和 jquery.simulate.js 实现模拟键盘事件，点击上下左右div相当于点击键盘的上下左右键
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            #box {
                width: 50px;
                height: 50px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: lightskyblue;
            }
            .box-wrapper {
                width: 100px;
                height: 100px;
                position: fixed;
                bottom: 0;
                left: 0;
                background: blue;
            }
            .box {
                float: left;
                background-color: orange;
                font-size: 30px;
                width: 50px;
                text-align: center;
                height: 50px;
            }
            .box:nth-child(1){
                background-color: pink;
            }
            .box:nth-child(4){
                background-color: blueviolet;
            }
        </style>
    </head>
    <script type="text/javascript">
        window.onload = function() {
            var box1 = document.getElementById("box");
            document.onkeydown = function(event) {
                event = event || window.event; /*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/
                console.log(event.keyCode);
                switch(event.keyCode) { /*keyCode:字母和数字键的键码值*/
                    /*37、38、39、40分别对应左上右下*/
                    case 37:
                        box1.style.left = box1.offsetLeft - 10 + "px"; /*图形左移*/
                        break;
                    case 38:
                        box1.style.top = box1.offsetTop - 10 + "px"; /*图形上移*/
                        break;
                    case 39:
                        // alert("你点击了右键");
                        // alert(box1.offsetLeft + 10 + "px");
                        box1.style.left = box1.offsetLeft + 10 + "px"; /*图形右移*/
                        break;
                    case 40:
                        box1.style.top = box1.offsetTop + 10 + "px"; /*图形下移*/
                        break;
                }
            }
        }
    </script>

    <body>
        <div id="box">

        </div>
        <div class="box-wrapper">
            <div class="box" ontouchend="arrow_click(2,'up')" ontouchstart="arrow_click(1,'up')">
                ↑
            </div>
            <div class="box" ontouchend="arrow_click(2,'down')" ontouchstart="arrow_click(1,'down')">
                ↓
            </div>
            <div class="box" ontouchend="arrow_click(2,'left')" ontouchstart="arrow_click(1,'left')">
                ←
            </div>
            <div class="box" ontouchend="arrow_click(2,'right')" ontouchstart="arrow_click(1,'right')">
                →
            </div>
        </div>

    </body>
    <script src="jq3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.simulate.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function arrow_click(k_type, type) {
            var t = jQuery.simulate.keyCode;
            var e = $('#box');
            var k_event = k_type == 1 ? 'keydown' : 'keyup';
            switch(type) {
                case 'right':
                    $(e).simulate(k_event, {
                        keyCode: t.RIGHT
                    });
                    break;
                case 'left':
                    $(e).simulate(k_event, {
                        keyCode: t.LEFT
                    });
                    break;
                case 'up':
                    $(e).simulate(k_event, {
                        keyCode: t.UP
                    });
                    break;
                case 'down':
                    $(e).simulate(k_event, {
                        keyCode: t.DOWN
                    });
                    break;
                case 'space':
                    $(e).simulate(k_event, {
                        keyCode: t.SPACE
                    });
                    break;
            }
        }
    </script>

</html>
初识 jquery.simulate.js 模拟键盘事件

家家灰灰

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具
