首頁 > web前端 > js教程 > 主體

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

php是最好的语言
發布: 2018-08-07 10:10:31
原創
5190 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!