H5移动端事件与设备宽度

移动端获取设备宽度

基本上所有的移动端获取宽度,都是从getBoundingClientRect()对象上获取，根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能，如下：

    rem();
    window.addEventListener('resize',function () {
        rem();
    });
    function rem() {
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width/10 + 'px';
    }

移动端触屏事件

1、PC端事件

onclick 鼠标点击触发
onmousedown 鼠标按下触发
onmousemove 鼠标移动触发
onmouseup 鼠标抬起触发

2、移动端事件

ontouchstart 手指按下触发
ontouchmove 手指移动触发
onTouchend 手指抬起触发

3、PC端事件和移动端事件的区别

通过on的方式添加touch事件在谷歌模拟器下无效
通过on的方式添加事件会前后覆盖
鼠标事件在移动端可以使用，但有300毫秒的延迟

4、事件监听

addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
在谷歌模拟器下一直识别
冒泡从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
捕获从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行

5、event对象

标准事件函数默认的第一个参数
是描述发生事件的详细信息

6、阻止默认事件

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象，但网页上的所有滚动条失效

7、阻止冒泡

在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时需要复制文本

8、事件点透问题

PC端鼠标事件,在移动端也可以正常使用，事件的执行会有300毫秒的延迟
问题的产生是，点击了页面之后，浏览器会记录点击下去的坐标
300毫秒之后，在该坐标找到现在的元素，执行该事件

9、点透问题解决办法

阻止默认事件，但在部分安卓机不支持
不用a标签做页面跳转，用window.location.href做跳转，比如移动端淘宝
在移动端不用鼠标事件

10、防止误触问题

用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转

11、获取手指信息

touches 当前屏幕上的手指列表（不常用）
targetTouches 当前元素上的手指列表（不常用）
changedTouches 触发当前事件的手指列表（常用）
获取手指的个数 e.changedTouches.length
获取坐标 e.changedTouches[0].pageX
注意：changedTouches手指抬起时还能获取手指的信息，而touches与targetTouches不能获取

12、手指对象的区别

在touchend的时候想要获取手指列表，只能用changedTouches
原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches

最后编辑于：2018.09.26 11:42:25