标签：offset 坐标 nbsp pre select 系统 fas window 系统菜单
Touchstart 手指触摸， = mousedown
Touchend 手指抬起 = mouseup
Touchmove 手指移动 = mousemove
阻止冒泡：e.stopPropagation();
CancelBubble
阻止默认事件
document.addEventListener("touchsmovve",function(ev) {
ev.preventDefault();
});
//阻止掉如：文字滚动，系统菜单，页面的回弹效果
//隐患：页面滚动条失效
事件点透
1 在移动端pc事件，会有300毫秒的延时
2 我们点击了页面以后，浏览器会记录下点下去的坐标
3 300毫秒以后，找到现在在这的元素，执行事件
解决办法
1 阻止默认事件
2 在移动端不适用鼠标事件，不用a标签做页面跳转（不用a标签还可以防止误触）
触摸事件touchEvent
1 event.touches 记录手指在屏幕上的相关信息
2 event.targetTouches记录手指在当前元素上的相关信息
3 event.changedTouches 记录手指在当前元素上的相关信息（触发当前事件的手指）
自定义滑屏代码
Js部分
/*
1 手指按下去的时候，记录手指坐标
2 手指移动的时候，记录手指坐标
3 用移动后的坐标减掉按下去的坐标 = 手指移动的距离
4 改变元素的坐标，用元素初始坐标坐标 + 加上手指移动的距离
*/
window.onload = function() {
var wrap = document.querySelector(‘#wrap‘);
var scroll = document.querySelector(‘#scroll‘);
var startPoint = 0;
var startEI = 0;
var maxTop = wrap.clientHeight - scroll.offsetHeight;
wrap.addEventListener(‘touchstart‘,function(e) {
//console.log(‘jjj‘);
var touch = e.changedTouches[0];
startPoint = touch.pageY;
startEI = scroll.offsetTop;
})
wrap.addEventListener(‘touchmove‘,function(e) {
//console.log(‘ddddjjj‘);
var touch = e.changedTouches[0];
var nowPoint = touch.pageY;
var dis = nowPoint - startPoint;
var top = startEI + dis;
if (top>0) {top = 0};
if (top<maxTop) {top = maxTop};
scroll.style.top = top + ‘px‘;
//console.log(dis);
})
}
Html代码
<div id="wrap">
<div id="scroll">
hsdhfasd <br />
hsdhfasd <br />
hsdhfasd <br />
hsdhfasd <br />
</div>
</div>
标签：offset 坐标 nbsp pre select 系统 fas window 系统菜单
原文地址：http://www.cnblogs.com/cjie/p/6107976.html
