const clickEvent = (function() {

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

touchstart 事件与 click 事件的冲突的更多相关文章

  1. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

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

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

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

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

  4. tap,touch,touchstart,事件与click事件的区别

    根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...

  5. 移动端touch拖动事件和click事件冲突问题解决

    通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...

  6. onblur事件和click事件冲突

    在js中onblur事件的优先级click事件,所以同一个元素上绑定两个事件的时候,onblur事件会冲掉click事件. 解决方案:将click事件改成mousedown事件

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

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

  8. jquery点击click事件和blur事件冲突如何解决

    最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...

  9. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

随机推荐

  1. Vue中v-model指令的常用修饰符

    v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...

  2. JS学习第五天

    循环语句: for(变量 in (容器名)数组名){ 执行的语句块: break: 结束整个循环; continue:结束本次循环, 进入下一次循环: } 双层for循环: 外层循环控制行,内层循环控 ...

  3. SpringBoot实现本地存储文件上传及提供HTTP访问服务

    笔者计划为大家介绍分布式文件系统,用于存储应用的图片.word.excel.pdf等文件.在开始介绍分布式文件系统之前,为大家介绍一下使用本机存储来存放文件资源. 二者的核心实现过程是一样的: 上传文 ...

  4. 【算法•日更•第二十七期】基础python

    ▎前言 看到这个题目,你一定会很好奇,为什么学打NOIP的要学习python?其实python对我们是很有用的! NOIP虽然不支持使用python提交代码,但是在NOILinux上天生自带pytho ...

  5. Spark QuantileDiscretizer 分位数离散器

    1.概念 接收具有连续特征的列,并输出具有合并分类特征的列.按分位数,对给出的数据列进行离散化分箱处理. 和Bucketizer(分箱处理)一样也是:将连续数值特征转换为离散类别特征.实际上Class ...

  6. Typescript node starter 3. App Router Controller

    Request request对象表示HTTP请求,并具有请求query字符串.参数.body.HTTP headers等的属性.除了添加新的属性和方法外,还包含原型的属性和方法. 随着系列文章的发布 ...

  7. Jmeter(二十二) - 从入门到精通 - JMeter断言 - 下篇（详解教程）

    1.简介 断言组件用来对服务器的响应数据做验证,常用的断言是响应断言,其支持正则表达式.虽然我们的通过响应断言能够完成绝大多数的结果验证工作,但是JMeter还是为我们提供了适合多个场景的断言元件,辅 ...

  8. CentOS7上lvm分区调整（resize2fs: Bad magic number in super-block while trying to open ...）

    问题描述:根目录空间占用率100% 首先用传统resize2fs方式调整分区: resize2fs -p /dev/mapper/centos-home 50Gresize2fs 1.42.9 (28 ...

  9. 学习一下 JVM （二） -- 学习一下 JVM 中对象、String 相关知识

    一.JDK 8 版本下 JVM 对象的分配.布局.访问(简单了解下) 1.对象的创建过程 (1)前言 Java 是一门面向对象的编程语言,程序运行过程中在任意时刻都可能有对象被创建.开发中常用 new ...

  10. Java面试题（Java Web篇）

    Java Web 64.jsp 和 servlet 有什么区别? jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器将 ...