Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

原生JavaScript模拟事件点击

Posted on 2017年7月30日2017年7月30日 by king2088

在某些功能上可能我们会使用到模拟用户点击,当然在jQuery中的模拟事件已经很强大了,但是我们再使用其他库或者使用原生JavaScript的时候,不可能使用jQuery的美元号去实现这个功能了,因此只能通过原生JavaScript去实现,下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为,如点击(click),触屏(touchStart)操作等,我们都可以进行模拟。

1、自动触发内置事件

自动触发事件有两种方法,目前支持IE内核以及Firefox内核浏览器,但是并不支持chrome
//自动触发内置事件
function commonTrigger(el, type) {
var evt = document.createEvent("MouseEvents");
evt.initEvent(type, true, true);
el.dispatchEvent(evt);
}
//自动触发内置事件
function trigger(el, type) {
var event = new MouseEvent(type, {
'view': window,
'bubbles': true,
'cancelable': true
});
el.dispatchEvent(event);
}

2、触发自定义事件

以上的内置事件,在chrome中无法执行,我们只能通过触发自定义事件的方法进行触发,相关代码如下:
function customTrigger(el, type) {
var event = new Event(type);
el.addEventListener(type, function (e) {
alert('ok');
}, false);
el.dispatchEvent(event);
}

3、使用方法

一看上面的函数,就知道使用方法很简单了,使用如下
var el = document.getElementById('element');
var type = 'click';
commonTrigger(el, type);
trigger(el, type);
customTrigger(el, type);

虽然这个代码能够在浏览器中,特别是chrome中实现点击事件,但是总是无法真实的模拟用户点击,大家慎用,jQuery中的方法,我没有尝试过,不知道是否能够真实模拟用户点击。如果你要模拟真实用户点击事件,得通过其他类库实现!

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme