用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 模拟键盘事件的更多相关文章

  1. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  2. js模拟键盘事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  3. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  4. selenium 模拟键盘事件 复制粘贴、右键、回车等

    #coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...

  5. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  6. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  7. [原创]Javascript 利用mousetrap.js进行键盘事件操作

    我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的.或者按下某个键执行某个方法.无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件. 自己也尝试了一下:具体代码如下: 详情可以去 ...

  8. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

随机推荐

  1. 十四、linux-MySQL的数据库集群读写分离及高可用性、备份等

    一.数据库集群及高可用性 二.mysql实现读写分离 mysql实现读写分离有多种方式: 1)代码语言(php\python\java等)层面实现读写分离,找开发进行实现. 2)通过软件工具实现读写分 ...

  2. [LC] 271. Encode and Decode Strings

    Design an algorithm to encode a list of strings to a string. The encoded string is then sent over th ...

  3. [LC] 513. Find Bottom Left Tree Value

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  4. OpenCVSharp介绍

    OpenCvSharp 是一个OpenCV的.Net wrapper,应用最新的OpenCV库开发,使用习惯比EmguCV更接近原始的OpenCV,有详细的使用样例供参考.该库采用LGPL发行,对商业 ...

  5. made his acquaintance|adequate|advisable|announce|contrived to|made up|toss|considering that

    PHRASE 与(某人)初次相识;结识(某人)When you make someone's acquaintance, you meet them for the first time and ge ...

  6. 最大流/最小割模板(isap) POJ1273

    isap模板核心代码: //d[]为距离标号数组,d[i]表示节点i到汇点的距离 //gap[]为GAP优化数组,gap[i]表示到汇点距离为i的节点个数 int dfs(int k,int flow ...

  7. python3多线程应用详解（第二卷：多线程到底是怎么工作的）

    现在很多人都说用多线程工作快是因为多个不同任务可以同时执行,注意我说的是不同任务,要是重复做一件事达到相同效果就是画蛇添足了,其实这是个错误的说法,线程真正的本质是无法同时执行的.现在我们来看下多线程 ...

  8. [LC] 28. Implement strStr()

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...

  9. JDK源码看Java域名解析

    前言 在互联网中通信需要借助 IP 地址来定位到主机,而 IP 地址由很多数字组成,对于人类来说记住某些组合数字很困难,于是,为了方便大家记住某地址而引入主机名和域名. 早期的网络中的机器数量很少,能 ...

  10. 三步教你实现MyEclipse的debug远程调试

    MyEclipse远程调试程序是个神奇的东西,有时一个项目本地运行没问题可放到服务器上,同样的条件就是结果不一样:有时服务器上工程出点问题需要远程调测.于是就灰常想看一下程序在远程运行时候的状态,希望 ...