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

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

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,可以作为参考。