H5移動端開發基礎（一）事件基礎
阿新 • • 發佈：2019-01-09
事件基礎
移動端基礎事件
手指按下：touchstart <==> mousedown
手指擡起：touchend <==> mouseup
手指移動：touchmove <==> mousemove
——touch事件 在chrome的模擬器下，部分版本通過on的方式來新增事件無效，有時候時好時壞，on的方式還會出現事件覆蓋
——addEventListener(‘事件名’, 函式, 冒泡或捕獲)
1) 不會存在前後覆蓋問題 2) 在chrome的模擬器下可以一直識別 3) false-冒泡,true-捕獲 **冒泡**：點選元素，它會把一個事件一直向上傳遞，從下向上傳遞 **捕獲**：從上向下傳遞 4) 事件函式中 預設的第一個引數是event物件 5) e.preventDefault()：阻止預設事件 阻止掉 document touchstart的預設事件，可以解決： ①阻止頁面上文字被選中，②阻止頁面上的系統選單 隱患：頁面上的所有滾動條失效 6) e.stopPropagation()：阻止冒泡事件 7) 阻止document的touchmove或者touchstart，可以清除系統預設的回彈
——事件點透：PC端的滑鼠事件 在移動端也可以正常使用，但是注意：事件的執行會有300ms的延遲
我們點選了頁面後，瀏覽器會記錄點選下去的座標，然後300ms後，在該座標找到現在在這裡的元素 執行事件
解決辦法：1) 阻止預設事件(部分安卓機型不支援)
2) 不在移動端使用滑鼠事件，不用a標籤做頁面跳轉
——touchEvent
touches：當前螢幕上的手指列表
targetTouches：當前元素的手指列表
changedTouches：觸發當前事件的手指列表
滑屏原理
① 手指按下去的時候，記錄下手指座標 ② 移動的時候，記錄下手指座標 ③ 用移動後的座標 - 移動前的座標 = 手指移動的距離 ④ 手指按下去的時候，記錄下元素的位置 ⑤ 移動之後，用手指移動的距離 + 元素的初始位置 = 元素現在所要在的位置
transform 與 transition
（1）transform/-webkit-transform（移動端）：
rotate：旋轉 deg（度數）
scale：縮放
scaleX：X縮放
scaleY：Y縮放
translateX：X位移（px）
translateY：Y位移（px）
skewX：x斜切（度數）
skewY：y斜切（度數）
（2）transition：
transition-duration：動畫時間
transition-delay：延遲時間
transition-property：要動畫的樣式
transtion-timing-function：動畫形式
無縫滑屏自動播放幻燈片
<!DOCTYPE html>
<html>
<head>
<title>滑屏的幻燈片-自動播放</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<style type="text/css" id="css">
body{
margin: 0;
}
#wrap{
overflow: hidden;
position: relative;
}
#list{
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
list-style: none;
}
#list li{
float: left;
}
#list img{
width: 100%;
display: block;
}
#nav{
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
line-height: 10px;
text-align: center;
}
#nav span{
display: inline-block;
width: 10px;
height: 10px;
background: #c00;
border-radius: 5px;
}
#nav .active{
background: #0f0;
}
</style>
<script type="text/javascript" src="transform.js"></script>
<script type="text/javascript">
document.addEventListener('touchstart', function(e){
e.preventDefault();
});
window.onload = function(){
var wrap = document.querySelector('#wrap');
var list = document.querySelector('#list');
list.innerHTML += list.innerHTML;
var lis = document.querySelectorAll('#list li');
var css = document.querySelector('#css');
var navSpan = document.querySelectorAll('#nav span')
wrap.style.height = lis[0].offsetHeight + 'px';
list.style.width = lis.length + '00%';
var style = '#wrap{height: '+ lis[0].offsetHeight+'px}';
var timer = 0;
style += '#list{width: '+ lis.length +'00%}';
style += '#list li{width:'+(1/lis.length*100)+'%}';
css.innerHTML += style;
var startPoint = 0;
var startX = 0;
var now = 0;
cssTransform(list, 'translateX', 0);
auto();
wrap.addEventListener('touchstart', function(e){
clearInterval(timer);
list.style.transition = 'none';
var translateX = cssTransform(list, 'translateX');
now = Math.round(-translateX/wrap.offsetWidth);
if(now == 0){
now = navSpan.length;
}
if(now == lis.length-1){
now = navSpan.length-1;
}
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
startPoint = e.changedTouches[0].pageX;
startX = cssTransform(list, 'translateX');
});
wrap.addEventListener('touchmove', function(e){
nowPoint = e.changedTouches[0].pageX;
var dis = nowPoint - startPoint;
cssTransform(list, 'translateX', startX + dis);
});
wrap.addEventListener('touchend', function(e){
var translateX = cssTransform(list, 'translateX');
now = Math.round(-translateX/wrap.offsetWidth);
tab();
auto();
});
function auto(){
clearInterval(timer);
timer = setInterval(function(){
if(now == lis.length-1){
now = navSpan.length-1;
}
list.style.transition = 'none';
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
setTimeout(function(){
now++;
tab();
}, 30);
}, 2000);
}
function tab(){
list.style.transition = '.5s';
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
for(var i=0;i<navSpan.length;i++){
navSpan[i].className = '';
}
navSpan[now%navSpan.length].className = 'active';
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="list">
<li>
<a href="#">
<img src="img/1.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/4.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/5.jpg">
</a>
</li>
</ul>
<nav id="nav">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</body>
</html>
function cssTransform(el, attr, val){
if(!el.transform){
el.transform = {};
}
if(arguments.length>2){
el.transform[attr] = val;
// console.log(el.transform);
var sVal = '';
for(var s in el.transform){
switch(s){
case 'rotate':
case 'skewX':
case 'skewY':
sVal += s+'('+el.transform[s]+'deg) ';
break;
case 'translateX':
case 'translateY':
sVal += s+'('+el.transform[s]+'px) ';
break;
case 'scaleX':
case 'scaleY':
case 'scale':
sVal += s+'('+el.transform[s]+') ';
break;
}
// console.log(sVal);
el.style.WebkitTransform = el.style.transform = sVal;
}
}else{
var val = el.transform[attr];
if(typeof val == 'undefined'){
if(['scale', 'scaleX', 'scaleY'].indexOf(attr)>-1){
val = 1;
}else{
val = 0;
}
}
return val;
}
}