js中點選事件與常用的事件（pc端和行動端）概述

1.點擊事件：

在pc端是點擊事件，但是在行動端是點擊事件，在行動端的專案中我們經常會區分點擊做什麼和雙擊做什麼，所以移動端的瀏覽器在識別click的時候，只有確定是單擊後才會把它執行，在移動端使用click會存在300ms的延遲:瀏覽器在第一次點擊結束後，還需要等到300ms看是否觸發了第二次點擊，如果觸發了第二次點擊就不屬於click了，沒有觸發第二次點擊才屬於click

但是，在某些場景下需要取消延遲：（1）靜止縮放：  使用這個方法必須完全停用縮放來達到目的，雖然大部分行動端能解決這個延遲問題，但是部分蘋果手機還是不行；

width - viewport的寬度； height - viewport的高度；initial-scale - 初始的縮放比例； minimum-scale - 允許用戶縮放到的最小比例； maximum-scale - 允許用戶縮放到的最大比例；user-scalable - 用戶是否可以手動縮放

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

（2）fastclick.js： FastClick 是FT Labs 專門為解決行動裝置瀏覽器300 毫秒點擊延遲問題所開發的一個輕量級的函式庫。簡而言之，FastClick 在偵測到touchend事件的時候，會透過DOM 自訂事件立即觸發一個模擬click事件，並把瀏覽器在300 毫秒之後真正觸發的click事件阻止掉

第一步：在頁面中引入fastclick.js檔案。
第二步：在js檔案中加入以下程式碼： 在 window load 事件之後，在body上呼叫FastClick.attach()即可。

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

如果你專案使用了JQuery，就將上面的程式碼改寫成：

$(function() {    
    FastClick.attach(document.body);    
});

取代行動端的click事件：

##（1）使用touchstart :touch事件包括touchstart、touchend、touchmove等，簡單使用touchstart來替換click，但問題是，如果我想在同一物件上綁定一個點擊事件和一個滑動事件怎麼辦，這時候就會出現衝突;在行動端，手指點選一個元素，會經過：touchstart --> touchmove -> touchend -->click

touch事件的模型：

事件名作用touchstart##手指按到螢幕上touchmove

	手指在螢幕上滑動
touchend	##手指離開畫面
touchcancle	特殊情況下關閉/退出時觸發

touch事件的屬性：#屬性名稱作用type事件類型target#事件來源preventDefault（returnValue）阻止預設行為stopPropagation（cancleBubble）停止事件的傳播touches[0].clientX觸碰位置的x值changedTouches目前的值和離開的值####

（2）tap事件：標準事件中沒有tap事件，tap事件是一些庫，如zepto，使用touch進行封裝的，在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，如果手指位置為相同位置且時間間隔較短，且過程中未曾觸發touchmove事件，則呼叫回呼函數；過300ms後還是會產生click事件，只是在該物件上沒有進行監聽，由此產生了「點透」現象： 1）頁面彈出一個模態框，模態框上有個按鈕（關閉模態框），按鈕正下方（在主頁上）有一個輸入框；2）當點擊模態框上的關閉按鈕，模態框立即消失，但300ms後click事件觸發，而輸入框剛好監聽click事件，因此輸入框會得到焦點 

pc端常用的事件：

當滑鼠指標移動到元素上時觸發mousedown##當元素上按下滑鼠按鈕時觸發mouseup#當在元素上釋放滑鼠按鈕時觸發mousewheel當滑鼠滾輪正在被滾動時執行的腳本keydown#在使用者按下按鍵時觸發keyup當使用者釋放按鍵時觸發load頁面結束載入之後觸發scroll#當元素滾動條被滾動時運行的腳本blur元素失去焦點時執行的腳本focus當元素獲得焦點時執行的腳本change#在元素值被改變時執行的腳本

#事件名稱	作用
click	當滑鼠點擊時觸發
mouseover	#當滑鼠指標移動到元素上時觸發
mouseout	##當滑鼠指標移出元素時觸發
mouseenter	##當滑鼠指標移動到元素上時觸發（不支援冒泡）
mouseleave	##當滑鼠指標移出元素上時觸發（不支援冒泡）
mousemove

 行動端常用的事件：

事件名稱作用click當點擊時觸發（點擊）load頁面結束載入之後觸發scroll#當元素滾動條被滾動時運行的腳本blur元素失去焦點時執行的腳本focus當元素獲得焦點時執行的腳本change#在元素值被改變時執行的腳本input代替keyup、keydowntouch事件模型處理單手指操作gesture事件模型處理多手指操作相關推薦：

使用原生JS封裝Tap事件，解決行動端300ms延遲

詳細介紹JavaScript行動端事件的基礎及對常用事件庫的總結

####

以上是js中點選事件與常用的事件（pc端和行動端）概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！