移动端事件
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>