对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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
jQuery 选择器理解
Mar 16 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
js实现简单抽奖功能
Nov 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环境搭建最新方法
2006/09/05 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
js实现微信聊天界面
2020/08/09 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
pycharm的python_stubs问题
2020/04/08 Python
python 如何设置守护进程
2020/10/29 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
幼儿园教师教学反思
2016/03/02 职场文书