解决移动端touch事件与click冲突的问题
最简单的办法,就只绑定一个事件不就行了;
第二种,我觉得和第一种也没啥区别。。
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冲突的问题的更多相关文章
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端touch事件影响click事件的相关解决方法
preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...
- 解决移动端touch事件(touchstart/touchend) 的穿透问题
情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内 ...
- 移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...
- 移动端Touch事件基础
1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...
随机推荐
- centos7 Apache开启URL重写组件并配置.htaccess实现伪静态
第一.修改httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...
- Linux端口占用情况查看
1,查看8010端口是否被占用[root@cloud ~]# netstat -an|grep 8010tcp 0 0 0.0.0.0:8010 0.0.0.0:* LISTEN 2,查看8010是被 ...
- git 查看日志记录
1.git log 如果日志特别多的话,在git bash中,按向下键来查看更多,按q键退出查看日志. 2.git show 查看最近一次commit内容,也可以后面加commit号,单独查看此次版本 ...
- 对接第三方服务引起的小思考-回调和Sign算法
背景 最近在对接一个同事写的支付公用模块,然后对第三方服务引起一两个小思考. 思考 回调 来看看我们同事是如何做回调的. 首先,请求支付接口的时候,将回调URL作为请求body的一个参数[不加密] ...
- 定期从Docker上部署的MySQL备份数据
前段时间公司停电,正巧赶上周一领导要开会要过一遍项目,然而项目所依赖的MySQL数据库是直接部署在宿主机,且因为各人部署方式不同的原因,花了很久才在开会前启动起来.于是开完会后,我第一件事就是把原先依 ...
- TouchListener PK OnTouchEvent + 多点触碰
1.基于监听的TouchListener 代码示例: 实现效果图: 实现代码: main.xml <RelativeLayout xmlns:android="http://schem ...
- sprigboot项目中配置xml格式的logback
slf4j依赖和logback的依赖 idea中springboot项目的resources目录下新建logback-spring.xml文件,内容大致如下: <?xml version=&qu ...
- C语言函数名以及取地址的区别和联系
有时看到如下的代码: /*****************************/ #include <stdio.h> #include <string.h> #inclu ...
- Paid Roads POJ - 3411
A network of m roads connects N cities (numbered from 1 to N). There may be more than one road conne ...
- jsonp 跨域Uncaught SyntaxError: Unexpected token :解决方法
[jQuery]Ajax实现跨域访问JSON Ajax跨域访问JSON 环境:.net4.0+jQuery+JSON.net 因为在跨域实现,所以这里新建网站,这个网站只需要Ashx文件 public ...