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 -->clicktouch事件的模型:作用 | |
---|---|
##手指按到螢幕上 | |
手指在螢幕上滑動 | |
touchend | ##手指離開畫面 |
touchcancle |
特殊情況下關閉/退出時觸發
|
#屬性名稱 | 作用 |
---|---|
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事件模型 | 處理多手指操作 |
詳細介紹JavaScript行動端事件的基礎及對常用事件庫的總結
####以上是js中點選事件與常用的事件(pc端和行動端)概述的詳細內容。更多資訊請關注PHP中文網其他相關文章!