用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. js window.onload 加载多个函数和追加函数

    平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...

  2. idea常用快捷键(对于新手不建议切换使用eclipse)

    查看方法实现:ctrl+alt+鼠标实现父类方法:ctrl+i查看方法的具体实现:ctrl+alt(鼠标再点击方法)快速导包:alt+enter格式化:Ctrl+Alt+L格式化当前行:ctrl+sh ...

  3. token和refresh token

    https://www.cnblogs.com/minirice/p/9232355.html 在spring boot中结合OAuth2使用JWT时,刷新token时refresh token一直变 ...

  4. 吴裕雄--天生自然python机器学习：决策树算法

    我们经常使用决策树处理分类问题’近来的调查表明决策树也是最经常使用的数据挖掘算法. 它之所以如此流行,一个很重要的原因就是使用者基本上不用了解机器学习算法,也不用深究它 是如何工作的. K-近邻算法可 ...

  5. SpringMVC插件安装、环境配置及快速入门_学习笔记

    SpringMVC 是现在广泛应用的框架结构,我也只是一个初学者,一遍学习一遍梳理整合,如有错误,希望大神指点,别误人. MVC :Model-View-Control 框架性质的C 层要完成的主要工 ...

  6. [原]调试实战——使用windbg调试excel启动时死锁

    原调试debugwindbg死锁deadlock 前言 这是几年前在项目中遇到的一个死锁问题,在博客园发布过.我对之前的笔记进行了整理重新发布于此. 本文假设小伙伴们知道一些基本概念,比如什么是.du ...

  7. gene cluster|DPG|拉马克主义变异|达尔文主义变异

    生命组学 A gene cluster is part of a gene family. A gene cluster is a group of two or more genes found w ...

  8. form中采用图片作为提交按钮

    <span style="font-size:14px;"><FORM name="formName" action="xxxx&q ...

  9. VDMA搭建视频通路总结

    全局观查,对整个工程的搭建的关键是要保证PL部分搭建成功,PS部分搭建成功,而且两者配合的很好. 我理解的PL部分涉及到模块的组合以及模块或者IP之间的逻辑的整理,PL部分困扰我比较久的是自动生成的w ...

  10. web前端校招笔试题集锦

    写一个求和的函数sum,达到下面的效果 // Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Sh ...