最简单的办法,就只绑定一个事件不就行了;

第二种,我觉得和第一种也没啥区别。。

const Button = document.getElementById("targetButton");

const clickEvent = (function() {
if ('ontouchstart' in document.documentElement === true)
return 'touchstart';
else
return 'click';
})(); Button.addEventListener(clickEvent, e => {
console.log("things happened!");
})

解决移动端touch事件与click冲突的问题的更多相关文章

  1. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  2. 移动端touch事件影响click事件的相关解决方法

    preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...

  3. 解决移动端touch事件(touchstart/touchend) 的穿透问题

    情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内 ...

  4. 移动端开发用touch事件还是click事件

    前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...

  5. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  6. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  7. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  8. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  9. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

随机推荐

  1. 免费申请 HTTPS 证书,开启全站 HTTPS

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 HTTP 报文以明文形式传输,如果你的网站只支持 HTTP 协议,那么就有可能遭受到安 ...

  2. 虚拟现实研究经典问卷Presence Questionnaire (PQ) 详细介绍

    虚拟现实(VR)是一种沉浸式体验,它的作用就是将用户完全包裹在一个人为构建出的(数字)虚拟世界中,让用户在这个新环境中得到不一样的体验,或完成一些现实中不能完成的任务.所以让体验者相信“我身处此中”非 ...

  3. element取表格对应id数据

    <el-button size="mini" type="danger" @click="editor(scope.row)"> ...

  4. Java面向对象程序设计第6章1-12

    1.this和super各有几种用法? this this 用法有三种,主要应用场合: 表示当前对象引用,常用于形参或局部变量与类的成员变 量同名的情形,使用this.成员名表示当前对象的成员 表示当 ...

  5. 31、vue-cli3引入封装svg图标

    svg图标放大不失真,png会出现失真现象. 一.方法一 1.在对应vue项目里添加插件 vue add svg-sprite 输入 Y 2.在执行 npm install svgo svgo-loa ...

  6. 02-13 Softmax回归

    目录 Softmax回归 一.Softmax回归详解 1.1 让步比 1.2 不同类之间的概率分布 1.3 目标函数 1.4 目标函数最大化 二.Softmax回归优缺点 2.1 优点 2.2 缺点 ...

  7. vue3.0 vue.config.js 配置实战

    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...

  8. Redis之数据类型及命令

    Redis(REmote DIctionary Server) 是一个遵守BSD协议.支持网络.可基于内存亦可持久化的日志型key-value存储系统. KEY 常用指令: 指令 注释 备注 exit ...

  9. 推荐一款超好用的工具cmder

    今天来推荐一个超级好用的命令行工具:cmder 一款Windows环境下非常简洁美观易用的cmd替代者,它支持了大部分的Linux命令.支持ssh连接linux,使用起来非常方便.比起cmd.powe ...

  10. Kubernetes之Flannel介绍

    Flannel是CoreOS团队针对Kubernetes设计的一个网络规划服务,简单来说,它的功能是让集群中的不同节点主机创建的Docker容器都具有全集群唯一的虚拟IP地址. 在Kubernetes ...