<!DOCTYPE html>

<html>

<head lang="zh-CN">

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1"/>

 <title></title>

 <style>

     .button {

         width: 200px;

         height: 200px;

         background-color: antiquewhite;

         margin: 20px;

         text-align: center;

         line-height: 200px;

     }

 </style>

</head>

<body>

 <div class="button">Button</div>

 <script>

     "use strict";

     var btn = document.querySelector('.button');

     btn.addEventListener('click', function (event) {

         console.log('OH~!You clicked me~!');

     }, false);

     var ev = new MouseEvent('click', {

         cancelable: true,

         bubble: true,

         view: window

     });

     btn.dispatchEvent(ev);

 </script>

</body>

</html>

js 模拟鼠标事件的更多相关文章

  1. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  2. js模拟触发事件

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

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

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

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

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

  5. js的鼠标事件整理-------Day47

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...

  6. Js 模拟鼠标点击事件

    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...

  7. OSG模拟鼠标事件影响操纵器

    viewer->getEventQueue()->mouseButtonPress(0,0,1); viewer->getEventQueue()->mouseMotion(1 ...

  8. js event鼠标事件

    1,鼠标焦点事件 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  9. js基础 -----鼠标事件(按下 拖拽)

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

随机推荐

  1. 使用SpringBoot的yml文件配置时踩的一个坑

    问题描述:使用SpringBoot整合redis进行yml配置的时候,启动工程报错,提示加载application.yml配置文件失败: ::27.430 [main] ERROR org.sprin ...

  2. Docker 入门（Mac环境）- part 2 容器（container）

    part-2 容器(container) 简介 Docker架构有三个层面,从高到低如下: stack(栈) services(服务) containers(容器) 现在接触的这些在容器这一层里,类似 ...

  3. chmod 权限 命令详细用法

    指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...

  4. [emacs] org-mode的一些小技巧

    Table of Contents 1 快速输入 #+BEGIN_SRC … #+END_SRC 2 代码按语法高亮 3 导出成HTML时的一些问题和技巧 3.1 生成目录表 3.2 为每个分节的标题 ...

  5. Robo 可视化mongoDb的操作

    因为公司的项目出现了MongodbCpu 100%的问题,所以最近在开始排查,也开始更加深入的接触Mongodb这个缓存型的数据库. 简单的就不说了,前面几张有安装和简单的使用,因为需要开始添加索引, ...

  6. WPF中的数据驱动

    在WPF出现之前,Win Form,ASP.NET等技术均采用“事件驱动”理念,这种由“事件-订阅-事件处理器”关系交织在一起构成的程序,景观可以使用MVC.MVP等设计模式,但一不小心就会使界面逻辑 ...

  7. sam9260 adc 测试

    /* * adc_test.c * * Copyright (C) 2007 Mengrz */ #include <stdio.h> #include <stdlib.h> ...

  8. 轻量级ORM框架Dapper应用八：使用Dapper实现DTO

    一.什么是DTO 先来看看百度百科的解释: 数据传输对象(DTO)(Data Transfer Object),是一种设计模式之间传输数据的软件应用系统.数据传输目标往往是数据访问对象从数据库中检索数 ...

  9. IOC容器：Unity

    一.什么是IOC 学习IOC之前先来了解一个依赖导致原则(DIP),依赖导致原则是IOC的核心原理. 依赖导致:即上层模块不应该依赖于低层模块,二者应该通过抽象来依赖.依赖于抽象,而不是依赖于细节. ...

  10. Scrapy安装错误：Microsoft Visual C++ 14.0 is required

    问题描述 当前环境win10,python_3.6.1,64位. 在windows下,在dos中运行pip install Scrapy报错: building 'twisted.test.raise ...