对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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
详解React之key的使用和实践
Sep 29 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
javascript面向对象三大特征之封装实例详解
Jul 24 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
php去除重复字的实现代码
2011/09/16 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
node.js实现端口转发
2016/04/14 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
python实现将内容分行输出
2015/11/05 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python实现随机选择元素功能
2017/09/14 Python
python3大文件解压和基本操作
2017/12/15 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
西式结婚主持词
2014/03/14 职场文书
卫生巾广告词
2014/03/18 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
董事长助理工作职责
2014/06/08 职场文书
无房证明样本
2015/06/17 职场文书
初中体育教学随笔
2015/08/15 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python