移動web點選事件--tap的封裝
阿新 • • 發佈:2019-01-09
基礎知識點的瞭解
https://blog.csdn.net/weixin_41105030/article/details/85763149
先來看一個例子,和我封裝的tap程式碼
HTML
<ul>
<li class="">熱門推薦</li>
<li class="active">潮流女裝</li>
<li class="">品牌男裝</li>
<li class="">內衣配飾</li>
<li class ="">家用電器</li>
<li class="">電腦辦公</li>
<li class="">手機數碼</li>
<li class="">母嬰頻道</li>
</ul>
CSS
*{
margin: 0;
padding: 0;
font-size: 13px;
list-style: none;
}
ul{
margin: 50px auto;
width: 100px;
}
li{
width : 100px;
height: 50px;
background: #ccc;
text-align: center;
line-height: 50px;
cursor: pointer;
}
li.active{
background: hotpink;
color: red;
}
m端呈現的效果圖
需求:當點選li時,給當前點選的li新增active類,並把li的兄弟元素有active的去掉
- click在移動端有延遲,所以要重新封裝一個點選事件
Object.prototype.tap = function (callback){
var startTime,startX,startY
this.addEventListener('touchstart',function(e){
if(e.touches.length>1){
return;
}
startTime = Date.now()
startX = e.touches[0].clientX
startY = e.touches[0].clientY
})
this.addEventListener('touchend',function(e){
if(e.changedTouches.length>1){
return;
}
if(Date.now()-startTime > 150){ //長按操作
return;
}
var endX=e.changedTouches[0].clientX;
var endY=e.changedTouches[0].clientY;
if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
callback && callback(e);
}
})
}
- 呼叫tap方法實現需求
var ul = document.querySelector('ul')
var li = ul.querySelectorAll('li')
li.forEach(function(item){
item.tap(function(){
document.querySelector('.active').classList.remove('active')
this.classList.add('active')
}.bind(item))
})
tap事件封裝
- dom是一個物件,所以我們的dom可以訪問到Object的原型上的成員
- 可以使用普通函式來封裝,tap點選會多次呼叫,重複建立屬性和方法消耗記憶體
- 封裝注意:從touchstart到touchend過程–點選的時間不能過長;點選過程移動範圍最好要無限0;點選目標元素只能一個觸碰點
tap封裝語言解析
Object.prototype.tap = function(callback){
var startTime,startX,startY
this.addEventListener('touchstart',function(e){
if(e.touches.length>1){
// 判斷是否只有一根手指點選,沒有點選事件tap不生效
return;
}
startTime = Date.now()
// 剛觸碰目標元素的時間
startX = e.touches[0].clientX
// 剛觸碰介面時手指距離介面左端(視口)的距離
startY = e.touches[0].clientY
// 剛觸碰介面時手指距離介面上端(視口)的距離
})
this.addEventListener('touchend',function(e){
if(e.changedTouches.length>1){
// 判斷過程到結束是否只有一根手指點選
return;
}
if(Date.now()-startTime > 150){
//長按操作,如果觸碰目標元素的事件太長,則不執行點選事件tap
return;
}
var endX=e.changedTouches[0].clientX;
var endY=e.changedTouches[0].clientY;
if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
// 我們限制觸碰過程中手指不能移動範圍過大,我們限制在一個半徑為6px的移動範圍內
callback && callback(e)
// 回撥函式--判斷是否有傳入處理函式,有則呼叫
}
})
}