对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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 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
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
js 页面输出值
2008/11/30 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
百联网上商城:i百联
2017/01/28 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
认识深刻的检讨书
2014/02/16 职场文书
本科应届生自荐信
2014/06/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
整理Python中常用的conda命令操作
2021/06/15 Python