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端常用的事件:
事件名 | 作用 |
---|---|
click | 當滑鼠點選時觸發 |
mouseover | 當滑鼠指標移動到元素上時觸發 |
mouseout | 當滑鼠指標移出元素時觸發 |
mouseenter | 當滑鼠指標移動到元素上時觸發(不支援冒泡) |
mouseleave | 當滑鼠指標移出元素上時觸發(不支援冒泡) |
mousemove | 當滑鼠指標移動到元素上時觸發 |
mousedown | 當元素上按下滑鼠按鈕時觸發 |
mouseup | 當在元素上釋放滑鼠按鈕時觸發 |
mousewheel | 當滑鼠滾輪正在被滾動時執行的指令碼 |
keydown | 在使用者按下按鍵時觸發 |
keyup | 當用戶釋放按鍵時觸發 |
load | 頁面結束載入之後觸發 |
scroll | 當元素滾動條被滾動時執行的指令碼 |
blur | 元素失去焦點時執行的指令碼 |
focus | 當元素獲得焦點時執行的指令碼 |
change | 在元素值被改變時執行的指令碼 |
移動端常用的事件:
事件名 | 作用 |
---|---|
click | 當點選時觸發(單擊) |
load | 頁面結束載入之後觸發 |
scroll | 當元素滾動條被滾動時執行的指令碼 |
blur | 元素失去焦點時執行的指令碼 |
focus | 當元素獲得焦點時執行的指令碼 |
change | 在元素值被改變時執行的指令碼 |
input | 代替keyup、keydown |
touch事件模型 | 處理單手指操作 |
gesture事件模型 | 處理多手指操作 |