对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 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
小程序click-scroll组件设计
Jun 18 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的4种常见运行方式
2015/03/20 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
Add a Table to a Word Document
2007/06/15 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python如何定义有默认参数的函数
2020/08/10 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
绿化工程实施方案
2014/03/17 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年班组工作总结
2015/04/20 职场文书
任命通知范文
2015/04/21 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android