2016年5月4日

[TOC]

2016年5月4日

移动端开发

alert(document.documentElement.clientWidth);//文档屏幕宽度

window.screen.width//设备屏幕宽度

alert(window.devicePixelRatio);//设备物理像素与设备独立像素的比值

• 事件

1. touchstart 手指按上

2. touchmove 手指按着移动

3. touchend 手指移开

• touchEvent

1. touches 当前位于屏幕上的所有手指的一个列表

2. targetTouches 位于当前DOM元素上的手指的一个列表

3. changedTouches 涉及当前事件的手指的一个列表

box.ontouchend=function(ev){
    console.log("3...");
    console.log(ev.touches);
    console.log(ev.targetTouches);
    console.log(ev.changedTouches);
}

• 自定义属性

使用JavaScript操作dataset：

1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。

2. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

        div[data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }

使用getAttribute/setAttribute操作

var test = document.getElementById('test');
test.dataset.birthDate = '19890615';
test.setAttribute('age', 25);
test.setAttribute('data-sex', 'male');

console.log(test.getAttribute('data-age')); //24
console.log(test.getAttribute('data-birth-date')); //19890516
console.log(test.dataset.age); //24
console.log(test.dataset.sex); //male

所有自定义属性在dataset对象中统一管理,方便调用遍历。

<a data-href="http://www.qq.com" ontouchmove="this.s=1" ontouchend="this.s||window.open(this.dataset.href),this.s=0">
        <img src="1.jpg">
</a>