序言:
今天第一天接触移动端 ,本来以为调试还需要安卓的虚拟机。安装完后才发现,直接放在手机里就可以测试一下啦,测出的测试单单指的是测试一下事件是否触发,像谷歌的控制台调试可是没有的?至少我还没发现。
- touchstart事件(手指接触到屏幕触发)
- touchmove事件(手指在屏幕上滑动触发)
- touchend事件(手指离开屏幕时触发)
这三个事件都有三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控)多点触控我还是没有练习到呢?
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个列表还有一些相同的属性:
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。
这里有一个例子可以深刻理解三个触摸事件以及他们的触摸列表
<script>
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
event = event || window.event;
event.preventDefault();//// 阻止浏览器默认事件,重要 (比如双击缩放 滚动)
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
alert(event.changedTouches[0]);
oInp.innerHTML = "Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
</script>
事件event的一些引申的属性
1.上文代码中event.type属性来判断事件的类型。
2.然后event的触摸列表的属性:event.touches;获取第一个就是event.touches[0];
event.changedTouches[0];event.targetTouches[0];
3.在上面的代码中,在touchstart事件中获取event.touches[0]或event.targetTouches[0],表示获取的是正在屏幕或dom元素上的手指。
而在startend事件中用的event.changedTouches[0];而不用event.touches[0]或event.targetTouches[0],是因为此时event.touches[0]或event.targetTouches[0]为defined;已经没有手指在屏幕或dom元素上了。而event.changedTouches[0]就代表此次事件涉及到的手指列表。
4.event.preventDefault(); 阻止浏览器默认事件,重要 (比如双击缩放 滚动)
判断是否支持触摸事件
//判断是否支持触摸事件的方法
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");//xmlDoM的对象
alert("支持TouchEvent事件!");
bindEvent(); //绑定事件
}
catch (e) {
alert("不支持TouchEvent事件!" + e.message);
}
}
createEvent(‘事件参数’);关于事件的其他的属性及其自定义事件,dom2级及ie的事件,将在下篇博客体现。