文档章节

你可能会用到的前端"奇技赢巧"

起风了夏天
 起风了夏天
发布于 2017/07/06 11:08
字数 1456
阅读 11
收藏 0

更多文章:www.f-z.cn

1.关于iPhone最下面会弹出奇怪框框的问题

就是这个玩意,期初以为是苹果自己做一些其它操作用的,后来才发现是操作键盘的,也就是唤起键盘,这个东东就会出来,检查了下页面,有input框虽然设置了readonly,但是在苹果中点击的时候键盘是没出来,但是这个东东会出来,采用了一个粗暴的方式,直接设置disable,然后我们再去改变input框的背景色即可。

2.数组深拷贝的问题

大家都知道数据是引用类型的,所以我们在使用之前通常会对它进行一次拷贝,不管是使用最笨的方式循环创建一个新数组,还是用slice方法,都可以解决基本问题。终于在一个项目中,数据是数组套对象套数组,然后怎么都拷贝不好使,搜了各种方式终于发现一个好方法:

 

[].concat(JSON.parse(JSON.stringify(dataList)));

这里先把数组对象转成一个JSON字符串并返回,此时它已经不是引用类型了,当再次解析成JavaScript对象并返回一个新的对象的时候我们已经对原数据进行了拷贝。

这里简单复习下JSON.stringify()这个方法,他有三个参数。

第一个就是你要转换的值,可以是任意,但是注意几点:

1.非数组类型的对象转化后不能保证按照原顺序输出。

2.对于undefined,函数,symbol的值在序列化中会被忽略(费数组对象的数据),或者转成null。

3.不可枚举属性会被忽略

第二个参数replacer可以是一个函数也可以是一个数组

如果是一个数组,这只有数组中包含的属性名才会被序列化出来(起到一个过滤的作用)

如果是函数,我们可以在序列化过程中对每一个属性进行操作并返回(仿佛数组的map方法)。

第三个参数用于指定缩进用的空白字符串,如果是数字则表示几个空格,最大为10,如果是字符串,则取前十个字母代替空格。

3.使用addEventListener绑定touch相关事件

由于使用的内部框架,最近在调试移动短的时候发现,没法拖动滚动条了,每次只能拖一点点,很费劲,浏览器报一堆警告,一开始也没时间研究,就凑合着做完在手机上调试下,倒也还好,不过问题还是要解决的,查了一些资料才发现是因为我们框架中做了一个操作,给document绑定了一个touch事件,阻止默认事件。

 

document.addEventListener('touch', function(e){

e.preventDefault();

}, false)

这看起来也没啥毛病,但是chrome在54版本之后加了个限制,就是绑定touch事件默认你不会使用preventDefault。所以解决起来就简单了,我们手动打开就可以了。那么现在介绍下addEventListener,大家重用的就三个个参数,事件类型,listener和是否事件冒泡,

 

target.addEventListener(type, listener[ ,useCapture])

但其实它第三个参数还可以是一个对象,有三个属性:

 

target.addEventListener(type, listener[, option ])

option{

capture:Boolean,//是否在捕获阶段传到改EventTarget执行

once:Boolean,//表示只调用一次

passive:Boolean//是否调用preventDefault,本来默认是FALSE,但是chrome54之后绑定touch事件会自动变为TRUE。

}

4.移动端可拖拽控件注意事项

在移动端去做拖拽其实原理上跟pc端是一样的,但是具体实施就有差别了。

触点位置的确定:

在pc端一般使用event.clientX/Y来获取鼠标位置,但是在移动端我们绑定touch事件,并没有这个属性,其实它被封在一个targetTouches属性中,所以我们要多做一步

 

obj.addEventListener('touchstart', function(e){

var touch = e.targetTouches[0];

//触点坐标

touch.pageX/Y

})

拖动距离

一般直接上来的话大家都是直接鼠标挪动到哪儿就把控件的位置定到哪儿。但是要注意,给控件动态设置位置的时候,是设置左上角的位置,但是触点却可能在控件的任意位置,所以在给控件动态设置位置的时候要把触点和元素原本位置的差值减掉,如下:

 

var offsetX = 0;

obj.addEventListener('touchstart', function(e){

var touch = e.targetTouches[0];

//记录触点和控件位置的差值

offsetX = touch.pageX-obj.offsetLeft;

})

obj.addEventListener('touchmove', function(e){

var touch = e.targetTouches[0]

obj.style.left = touch.pageX-offsetX+'px';

})

控件拖动范围的控制

控件不管怎么拖动,都要保证它是在可视区,所以在上下左右四边去拖动的时候是不能拖出去的。

当控件有点击事件

该控件可拖动还可以点击触发事件,这个时候就要区分到底是拖动还是点击,我们这里处理是已300ms为区分,以及手指移动的距离不小于某一值。首先在时间上控制,长时间不放开则不会触发点击事件,然后再次基础上还要方式用户快速拖动,当然这也防止了一种特殊的拖动情况,在边界处控件并没有移动,但是手指移动了。

原生事件的阻止

这里主要是指长时间按在控件上,会触发复制和粘贴事件,所以我们这里要阻止这个事件,方法也很简单,css即可控制

 

-webkit-touch-callout:none; /*系统默认菜单被禁用*/

-webkit-user-select:none; /*webkit浏览器*/

-khtml-user-select:none; /*早期浏览器*/

-moz-user-select:none;/*火狐*/

-ms-user-select:none; /*IE10*/

user-select:none;

 

 

本文转载自:http://www.f-z.cn/id/271

起风了夏天
粉丝 1
博文 10
码字总数 23
作品 0
崇明
私信 提问
Eova DIY Formatter 奇技赢巧

将单元格内容格式化为URL: formatter: function(value, row, index, field) { return '<a target="blank" href="http://g.cn" style="color:blue">' + value + '</a>' } 行尾单元格添加各种......

Jieven
2015/08/10
0
0
倍数提高工作效率的 Android Studio 奇技

来源:JeremyHe 链接:http://zlv.me/posts/2015/07/13/14android-studio-tips/ 这是从Philippe Breault的系列文章《Android Studio Tips Of the Day》中提取出来的自认为精华的部分。 这些技...

数通畅联
2015/10/22
100
0
D2 日报 2019年4月23日

📰 新闻 ➡️ 疑似B站后端源码流出 juejin.im 🔩 开源项目 ➡️ gridsome/gridsome 基于 Vue 的静态站点生成器,从 headless CMS、本地文件、API 构建支持 CDN 的站点 github.com ➡️ ...

D2开源组
04/23
0
0
《王者荣耀》女性游戏市场的崛起

根据IDG支持的互联网咨询公司极光提供的数据,截至今年5月,女玩家占到《王者荣耀》用户总数的54.1%,而同类游戏的平均比例仅为35%或更低。 例如,从事幼师工作的朱巧普(Zhu Qiaopu,音译)...

yowoyn
2018/02/04
0
0
唐巧专访:用 HTML5 写移动应用终究不会成为主流

小编语 本文为 DevLink 专访系列,本期采访嘉宾是 iDev 苹果开发者大会特约出品人、小猿搜题产品技术负责人——唐巧。在参加 iDev 苹果开发者大会前夕,这位资深 iOS 开发者接受了 DevLink ...

DevLink
2016/10/13
270
0

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
19分钟前
1
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixan__
44分钟前
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
29
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部