用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. php对比二个不同的二维数组

    $diff_data = array_filter($data1, function($v) use ($data2) { return ! in_array($v, $data2);});

  2. O - 覆盖的面积（线段树+扫描线）

    给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积. Input输入数据的第一行是一个正整数T(1<=T<=100),代表测试数据的数量.每个测试数据的第一行是一个正整数N(1& ...

  3. 算法笔记4.3递归 问题 B: 数列

    题目描述 编写一个求斐波那契数列的递归函数,输入n 值,使用该递归函数,输出如下图形(参见样例). 输入 输入第一行为样例数m,接下来有m行每行一个整数n,n不超过10. 输出 对应每个样例输出要求的 ...

  4. 吴裕雄--天生自然 R语言开发学习：R语言的简单介绍和使用

    假设我们正在研究生理发育问 题,并收集了10名婴儿在出生后一年内的月龄和体重数据(见表1-).我们感兴趣的是体重的分 布及体重和月龄的关系. 可以使用函数c()以向量的形式输入月龄和体重数据,此函 数 ...

  5. 关于va_list实例

    printf函数: #include <stdio.h> #include <stdarg.h> int myself_printf(char *format, ...) { ...

  6. considerate|considerable|content|Contact|Consult|deceived|

    ADJ-GRADED 替人着想的;体贴的Someone who is considerate pays attention to the needs, wishes, or feelings of o ...

  7. Html 的生命周期

    零.序言 vue 用多了,自然离不开生命周期.最近突发奇想,加上之前看过的文章中关于 script 标签中的 async 和 defer 的捣糨糊,决定整理一下,攻克这个模糊点. 当然,最多的还是与 ...

  8. [洛谷P4720] [模板] 扩展卢卡斯

    题目传送门 求组合数的时候,如果模数p是质数,可以用卢卡斯定理解决. 但是卢卡斯定理仅仅适用于p是质数的情况. 当p不是质数的时候,我们就需要用扩展卢卡斯求解. 实际上,扩展卢卡斯=快速幂+快速乘+e ...

  9. linux在线书籍

    <Linux就该这么学-刘遄>https://www.linuxprobe.com/

  10. 吴裕雄--天生自然python学习笔记：Python3 错误和异常

    语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 >>>while True print('Hello world') File "< ...