用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. VirtualBox端口映射

    问题:VirtualBox里面启动Django项目后发现在虚拟机能打开,在物理机上无法打开如图: 解决方法:端口映射 问题解决!其他端口问题只需要添加对应端口即可,比如xshell连接虚拟机要添加22 ...

  2. 移植linux4.14内核到四核Exynos4412开发板

    最近法师收到了很多留言,其中有一部分问法师什么时候更新,还有一大部分问法师我是买迅为的IMX6UL精英版好呢还是买4412精英版好呢,因为我们这俩个都不贵.法师的建议的是入手4412!为什么呢? 第一 ...

  3. 【个人笔记】ximo早期发的脱壳教程——手脱UPX壳

    [个人笔记]ximo早期发的脱壳教程--手脱UPX壳   壳分为两种:压缩壳和加密壳,UPX是一种很简单的压缩壳.   手脱UPX壳: 工具:ExeinfoPE.OD 对象:rmvbfix 方法1:单 ...

  4. Mysql计算时间最近多久

    -- DATE_SUB(CURDATE(), INTERVAL 3 MONTH)计算结果为当前时间的前推三个月,time字段可为时间型字符串 select * form t_user where ti ...

  5. 吴裕雄--天生自然python Google深度学习框架：TensorFlow实现神经网络

    http://playground.tensorflow.org/

  6. Ubuntu虚拟环境的搭建

    转载:https://blog.csdn.net/weixin_43078957/article/details/86006240 虚拟环境的搭建1.pip install virtualenv这个要 ...

  7. [LC] 113. Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  8. .vimrc文件

    1 set number 2 set shiftwidth=4 3 set softtabstop=4 4 set tabstop=4 5 set expandtab 6 "set hlse ...

  9. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-学习mock（7）

    学习mock # learn_mock_7.py # 单元测试结合mock思路 import unittest from mock import mock from day_20200208_mooc ...

  10. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...