基礎知識點的瞭解

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的去掉

1. 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);
           }
	})
}

2. 呼叫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事件封裝

1. dom是一個物件，所以我們的dom可以訪問到Object的原型上的成員
2. 可以使用普通函式來封裝，tap點選會多次呼叫，重複建立屬性和方法消耗記憶體
3. 封裝注意：從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)
               // 回撥函式--判斷是否有傳入處理函式，有則呼叫
          }
   })
}