工作中偶尔会遇到一些不常见的问题,但是解决起来又极其麻烦,通常要找很多资料才能搞定,这里我总结了近段时间遇到的一些问题,可能会对你有帮助,高手勿喷。

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;

这是我自己写的一个https://github.com/Stevenzwzhai/plugs/tree/master/drag,可以作为参考。

你可能会用到的"奇技赢巧"的更多相关文章

  1. [转]倍数提高工作效率的 Android Studio 奇技

    转自:http://android.jobbole.com/81687/ 倍数提高工作效率的 Android Studio 奇技 2015/10/08 · 技术分享 · 4 评论· Android S ...

  2. 你可能不知道的 docker 命令的奇淫怪巧

    你可能不知道的 docker 命令的奇淫怪巧 Intro 介绍并收录一些可能会用到的一些简单实用却很少有人用的 docker 命令 dangling images build 自己的 docker 镜 ...

  3. (转)【深入浅出jQuery】源码浅析2--奇技淫巧

    [深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html

  4. 倍数提高工作效率的 Android Studio 奇技

    来源:JeremyHe 链接:http://zlv.me/posts/2015/07/13/14_android-studio-tips/ 这是从Philippe Breault的系列文章<An ...

  5. Android Studio 提高工作效率的奇技

    1.ctrl+f12 ctrl+f12此快捷键可以调出当前文件的大纲,并通过模糊匹配快速跳转至指定的方法.勾选上“show anonymous classes”后其功能相当于Eclipse中的ctrl ...

  6. Python奇技

    本文目录 1. 显示有限的接口到外部 2. with的魔力 3. filter的用法 4. 一行作判断 5. 装饰器之单例 6. staticmethod装饰器 7. property装饰器 8. i ...

  7. JACASCRIPT--的奇技技巧的44招

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  8. C语言的奇技

    1.一个整型变量/字面值常量通常足够大,可以同时表示几个字符,所以有的C编译器允许字符常量/char及整型常量有多个字符.这表明当用' yes' 替代" yes" 时可能不会被发现 ...

  9. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

随机推荐

  1. AFN 切换BaseUrl

    在某个特定的接口需要修改baseurl时: 直接使用kvc: [_sessionManager setValue:[NSURL URLWithString:NEW_BASE_URL] forKey:@ ...

  2. 可持久化线段树(主席树)快速简洁教程 图文并茂 保证学会。kth number例题

    如果学不会也不要打我. 假设你会线段树 开始! --- 主席树也叫可持久化线段树 顾名思义,它能够保存线段树在每个时刻的版本. 什么叫每个时刻的版本?你可能对一棵普通线段树进行各种修改,这每种样子就是 ...

  3. 【转】onConfigurationChanged

    http://blog.csdn.net/xiaodongvtion/article/details/679938 转载自该文章. 注意:onConfigurationChanged事件并不是只有屏幕 ...

  4. 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...

  5. 2018.9.17 面试问题-----如何对List集合中的元素进行排序?

    Collections对List集合中的数据进行排序 有时候需要对集合中的元素按照一定的规则进行排序,这就需要用到 Java中提供的对集合进行操作的工具类Collections,其中的sort方法 先 ...

  6. hadoop二次排序

    import java.io.DataInput; import java.io.DataOutput; import java.io.File; import java.io.IOException ...

  7. ProjectOnline同步数据到线下

    根据微软官方文档 我们能将office365上的应用系统projectonline数据同步到线下. 我们看看projectonline上面的数据: 同步后到达sqlserver的数据 这样office ...

  8. linux网络相关配制及命令

    1.虚拟机配制 查看ip: ip addr 配制网卡(读者可以忽略): 编辑虚拟网络编辑器,修改子网IP 查看ip,输入ip addr 开启网络:ifup eth0  关闭网络:ifdown eth0 ...

  9. JDBC配置文件db.properties(Mysql) 及dbutils的编写

    #数据库驱动driver=com.mysql.jdbc.Driver#数据库连接url=jdb:mysql://localhost:3306/newdb3?useUnicode=true&ch ...

  10. 避免 ‘sudo echo xxxx >’ 时候 出现 “permission denied”

    ➜  ~ echo "/opt/nfs 10.10.10.*(rw,all_squash,sync)">>/etc/exports zsh: permission de ...