首页 > 其他分享 >vue学习之-----移动端插件FastClick

vue学习之-----移动端插件FastClick

时间:2023-01-26 14:34:09浏览次数:43  
标签:插件 fastclick vue FastClick 事件 跳转 移动 click

1、为什么要使用fastclick

(1)移动端的浏览器,默认会在用户点击屏幕300ms延迟之后,才会触发点击事件【为了检查用户是否在做双击】,为了能立即响应用户的点击事件,所以有了fastclick;

(2)移动端的浏览器事件执行顺序为:touchstart》touchend》click 。由于移动端click事件的滞后性,很有可能上一个页面上同一位置的click事件会在下一个页面的同一位置的元素上执行,导致“点击穿透”。

2、如果移动端不使用click事件,全部使用touch事件,会怎么样?

(1)如果不使用click,就没有延迟的弊端了

  注意:如果遇到<a>标签,还是要注意把href属性的跳转换成js控制跳转【因为href跳转本质上也是click】

(2)对于用户来说,有时触发touch事件,只是想滑动屏幕,但是却跳转了页面,这不是他想要的效果

  所以,click事件又是必须的

3、在vue中使用fastclick

npm 安装:npm i fastclick

main.js中引入:

 

标签:插件,fastclick,vue,FastClick,事件,跳转,移动,click
From: https://www.cnblogs.com/zhaoyingzhen/p/17067514.html

相关文章

  • 你知道这个提高 Java 单元测试效率的 IDEA 插件吗
    前言2023年我们公司主抓代码质量,所以单元测试必不可少,而且都写到了年底的绩效目标中了。在考虑如何达成这个目标的过程中,我发现了一个关于单元测试的IDEA插件——SquareTe......
  • vue3中获取ref元素的几种方式总结
    1.原生js获取dom元素:document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)2.ref获取单个dom元素:<temp......
  • vue学习之----- 图片懒加载插件【vue-lazyload】
    1、用npm安装npmivue-lazyload2、main.js中绑定到vue对象上 3、在需要懒加载的img标签上把src换成v-lazy 4、懒加载的意义:(1)显示在屏幕之外的图片不加载,图片......
  • vue2升级vue3:vue3真的需要vuex或者Pinia吗?hooks全有了
    在写 《vue2升级vue3:TypeScript下vuex-module-decorators/vuex-classtovuex4.x》,建议新项目使用 Pinia,但是我的项目部分组件希望直接打包出去给地方使用。这个时候还是......
  • vue2升级vue3:getCurrentInstance—Composition api/hooks中如何获取$el
    在vue2中,我们进程看到this.$el操作。但是在vue3如何获取组件的当前dom元素呢? 可以利用 getCurrentInstancegetCurrentInstanceVue3.x中的核心方法:getCurrentIns......
  • VUE3/TS/TSX入门手册指北
    VUE3入门手册vue3入门首先查看官方文档:https://cn.vuejs.org/guide/quick-start.html如果有vue2基础,速成课程:https://www.zhoulujun.co/learning-vue3/component.html......
  • Vue2迁移Vue3,如何迁移?
    vue2对比Vue3有很多新特性增加,也有很多功能属于破坏性更新。列举值得关注的新特性第一个肯定是组合式API​​setup​​​以及​​setup语法糖​​模式新增的内置组件......
  • 关于我写了一个vite插件那些事
    为什么要写这个插件解决了什么问题在我们开发的过程中有​​开发模式​​​和​​生产模式​​​,那有些测试代码会在开发模式的时候使用,在生产环境要删掉,一般是手动删除,另......
  • Vue3 setup 如何添加name
    Vue3中name有什么用呢?1.在递归组件的时候需要定义name2.配合keep-aliveincludeexclude可以缓存组件3.在Vue有报错或者调试的时候可以看到组件的nameVue3定义name1.自动......
  • Vue $set 源码解析(保证你也能看懂)
    首先我们看文档有这个例子下面是vue$set部分源码if(process.env.NODE_ENV!=='production'&&(isUndef(target)||isPrimitive(target))){warn('Cannotset......