解决移动端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 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...
随机推荐
- thymeleaf 设置display样式
使用th:style标签: th:style="'display:' + @{(${value} ? 'none' : 'inline-block')} + ''" 其中value ...
- Hyperion: Building the Largest In memory Search Tree
Introduction 索引在数据管理中起到很重要的作用,很多索引结构都会采用访问速度快而且内存消耗少的trie树,但一般常见的trie树索引结构都强调效率而忽视内存的效率,他们的效率虽然高,但内存 ...
- ES6学习总结之Set和Map数据结构的理解
前言 当我们需要存储一些数据的时候,首先想到的是定义一个变量用来存储,之后我们可能学了数组,发现数组比变量可以存储更多的数据,接着可能有其它的存储数据的方法等等,然而我今天需要介绍的是在ES6中比较常 ...
- Java诊断利器Arthas
1 简介 Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决: 这个类从哪个 jar 包加载的?为什么会报各种类相关的 ...
- Spring项目启动报"Could not resolve placeholder"解决
1.问题的起因: 除去properites文件路径错误.拼写错误外,出现"Could not resolve placeholder"很有可能是使用了多个PropertyPlace ...
- React+后端实现导出Excle表格的功能
最近在做一个基于React+antd前端框架的Excel导出功能,我主要在后端做了处理,根据以下步骤,可以很容易就实现导出Excel表格数据的功能. 在做这类导出文件的功能,其实,在后端进行处理,会更 ...
- 阿里云服务器ecs + tomcat + 域名解析 部署web页面
1.购买ecs:https://www.aliyun.com/product/ecs?spm=5176.12825654.eofdhaal5.2.3bf92c4aYOB7gL&aly_as=A ...
- 原生js动态创建文本内容的几种方式
1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...
- dp复习 背包[礼物]
[问题描述]人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想知道当他花一定钱数后剩余钱数无法再购买任何一件剩 ...
- 洛谷P3258 [JLOI2014]松鼠的新家【LCA+树上差分】
简要题意 树上n个节点,给定路径,求每个点经过次数 题意分析 对于每两个点,有两种情况,第一种,他们的lca为本身,第二种,他们有公共祖先,又要求他们的点经过次数,暴力是不可能的,复杂度不对,所以可以 ...