代码触发,手动触发touchstart事件,touch事件,click事件,自定义事件

代码触发,手动触发touchstart事件,touch事件,click事件,自定义事件代码触发,手动触发touchstart事件,touch事件,click事件,自定义事件

大家好,又见面了,我是你们的朋友全栈君。

工作中有时候会用到需要用代码去手动触发某个事件或者是自定义事件,通常触发click事件的做法为eleme.click(),遇到touchstart就行不通了。

可以使用以下方式

// 创建事件.
var event = document.createEvent('Events');
// 初始化一个点击事件,可以冒泡,无法被取消
event.initEvent('touchstart', true, false);
// 设置事件监听.
elem.addEventListener('touchstart', function (e) { 
   
  // e.target 就是监听事件目标元素
}, false);
// 触发事件监听
elem.dispatchEvent(event);

initEvent已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,不建议再使用此方法,可以使用Event构造函数

var event = new Event('touchstart');
//监听
elem.addEventListener('touchstart', function (e) { ... }, false);
// 触发event.
elem.dispatchEvent(event);

Event构造函数也可以使用自定义事件

var event = new Event('CustomEvent');
//监听
elem.addEventListener('CustomEvent', function (e) { ... }, false);
// 触发event
elem.dispatchEvent(event);

感谢阅读!欢迎关注微信公众号”混沌前端“,获取推送更新。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150775.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月19日 下午8:00
下一篇 2022年6月19日 下午8:00


相关推荐

  • httprunner(5)编写测试用例[通俗易懂]

    httprunner(5)编写测试用例[通俗易懂]编写测试用例HttpRunnerv3.x支持三种测试用例格式pytest,YAML和JSON。官方强烈建议以pytest格式而不是以前的YAML/JSON格式编写和维护测试用例格式关系如下图所示

    2022年7月28日
    13
  • 【强化学习】DDPG(Deep Deterministic Policy Gradient)算法详解[通俗易懂]

    【强化学习】DDPG(Deep Deterministic Policy Gradient)算法详解[通俗易懂]http://www0.cs.ucl.ac.uk/staff/d.silver/web/Teaching.html引自ReinforcementLearning:AnIntroduction强化学习名著2018新编版DPG论文http://www0.cs.ucl.ac.uk/staff/d.silver/web/Applications_files/determinis…

    2022年6月15日
    47
  • idea配置lombok.jar(idea安装离线插件)

    项目中经常使用bean,entity等类,绝大部分数据类类中都需要get、set、toString、equals和hashCode方法,虽然eclipse和idea开发环境下都有自动生成的快捷方式,但自动生成这些代码后,如果bean中的属性一旦有修改、删除或增加时,需要重新生成或删除get/set等方法,给代码维护增加负担。而使用了lombok则不一样,使用了lombok的注解(@Setter,@Getter,@ToString,@@RequiredArgsConstructor,@EqualsAndHas

    2022年4月14日
    277
  • vuecli4升级到vuecli5踩坑记录

    vuecli4升级到vuecli5踩坑记录项目以来的 module 版本很新 用到了 es2020 的语法 在 vuecli4 版本上死活编译不成功 升级 5 后解决 这个过程中在配置 vue config js 中遇到了很多问题 记录下来或许能给其他人提供帮助 vuecli 官网英文已经更新为最新的 cli5 但中文还停留在 cli4 导致我最开始在查资料时一直没有查到官方资料 后来偶然间切换英文才发现 1 配置 scss pretendData 变为 additionalDa 启用 cssmoudles 这个 vuecli 官网也有记录 Workingwi

    2026年3月16日
    2
  • Linux中的网络管理——网络配置及命令

    Linux中的网络管理——网络配置及命令目录目录 Linux 网络配置 ifconfig 命令 Linux 网络配置文件网卡信息文件主机名文件 DNS 配置文件 VMWare 中 Linux 的网络参数配置 VMWare 桥接模式下配置静态 IPLinux 网络命令网络环境操作网络测试命令 Linux 网络配置 在 Linux 中配置 IP 地址的方法有以下这么几种 图形界面配置 IP 地址 操作方式如 Windows 系统配置 IP 但在实际生产中 我们并不建议在

    2026年3月17日
    2
  • sublime text3 激活码【注册码】

    sublime text3 激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    102

发表回复

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

关注全栈程序员社区公众号