对vux点击事件的优化详解


Posted in Javascript onAugust 28, 2018

Vux是基于Vue和WeUI的组件库。对于应用vux的项目因为点击绑定的是click事件,自然也存在移动端300ms延迟现象。我们可以用fastclick库来解决这个问题,具体步骤如下:

这里以vue+webpack项目目录为例:

对vux点击事件的优化详解

1、打开node控制台,切换到自己的项目目录

对vux点击事件的优化详解

2、npm安装fastclick,并将版本信息写入本地packpage.json文件

对vux点击事件的优化详解

3、下载成功后,在node_modules目录下可以看见fastclick库文件夹,且在packpage.json文件里可以看见:

对vux点击事件的优化详解

4、在src目录下的main.js文件加上语句即可解决延迟问题:

const FastClick = require('fastclick');
FastClick.attach(document.body);

对vux点击事件的优化详解

引用fastclick的场景不一定是在vue+webpack项目结构下,还有其他的引入场景:

直接script引入fastclick.js文件并调用内置方法

<script type='application/javascript' src='./src/fastclick.js'></script>

<script>
if ('addEventListener' in document) {
 document.addEventListener('DOMContentLoaded', function() {
  FastClick.attach(document.body);
 }, false);
}

// 如果有引入jquery库,还可以这样:
$(function() {
 FastClick.attach(document.body);
});
</script>

更多的引入场景及具体引入方法请参见fastclick

以上这篇对vux点击事件的优化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js清理Word格式示例代码
Feb 13 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 #Javascript
You might like
一个odbc连mssql分页的类
2006/10/09 PHP
PHP fclose函数用法总结
2019/02/15 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python绘制彩虹图
2019/12/16 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python 两种方法删除空文件夹
2020/09/29 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
事假请假条范文
2014/04/11 职场文书
难忘的一天教学反思
2014/04/30 职场文书
纪检监察建议书
2014/05/19 职场文书
作风建设剖析材料
2014/10/06 职场文书
辩护词格式
2015/05/22 职场文书
旗帜观后感
2015/06/08 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL