2. 程式人生 > >移動端點選事件、滑動事件、長按事件封裝

移動端點選事件、滑動事件、長按事件封裝

阿新 • • 發佈：2019-01-25
window.onload=function(){ $(".box").swipe(function(){ this.innerHTML='滑動'; }); $(".box").swipeRight(function(){ this.innerHTML='右劃'; }); $(".box").swipeLeft(function(){ this.innerHTML='左劃'; }); $(".box").swipeUp(function(){ this.innerHTML='上劃'
; }); $(".box").swipeDown(function(){ this.innerHTML='下劃'; }); $(".box").tap(function(){ this.innerHTML='點選'; }); $(".box").longTap(function(){ this.innerHTML='長按'; }); }; function $(obj){ if(typeof obj=="string"){ obj=document.querySelectorAll(obj); }; if
(typeof obj.length=="number"){ return new TouchEvent(obj); }; return new TouchEvent([obj]); }; function TouchEvent(obj){ var _this=this; this.obj=obj; for(var i=0;i<this.obj.length;i++){ this.obj[i].touches={x:0,y:0}; this.obj[i].index=i; this.obj[i].moves=true
; this.obj[i].leave=true; this.obj[i].longTouch=true; this.obj[i].addEventListener("touchstart",function(e){ _this.fnStart(e,this.index); }); this.obj[i].addEventListener("touchend",function(e){ _this.fnEnd(e,this.index); }); this.obj[i].addEventListener("touchmove",function(e){ _this.fnMove(e,this.index); }); }; }; TouchEvent.prototype={ fnStart:function(e,index){ this.obj[index].moves=true; this.obj[index].leave=true; this.obj[index].longTouch=true; this.obj[index].touches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}; this.obj[index].time=setTimeout(function(){ if(this.obj[index].leave&&this.obj[index].moves){ this.longTap.call(this.obj[index]); this.obj[index].longTouch=false; }; }.bind(this),1000); }, fnEnd:function(e,index){ var disX=e.changedTouches[0].pageX-this.obj[index].touches.x; var disY=e.changedTouches[0].pageY-this.obj[index].touches.y; clearTimeout(this.obj[index].time); if(disX!=0||disY!=0){ if(Math.abs(disX)>10||Math.abs(disY)>10){ this.swipe.call(this.obj[index]); }; if(Math.abs(disX)>Math.abs(disY)){ if(disX>10){ this.swipeRight.call(this.obj[index]); }; if(disX<-10){ this.swipeLeft.call(this.obj[index]); }; }else{ if(disY>10){ this.swipeDown.call(this.obj[index]); }; if(disY<-10){ this.swipeUp.call(this.obj[index]); }; }; }else{ if(this.obj[index].longTouch&&this.obj[index].moves){ this.tap.call(this.obj[index]); this.obj[index].leave=false }; }; }, fnMove:function(e,index){ this.obj[index].moves=false; }, swipe:function(fn){ this.swipe=fn; }, swipeRight:function(fn){ this.swipeRight=fn; }, swipeLeft:function(fn){ this.swipeLeft=fn; }, swipeUp:function(fn){ this.swipeUp=fn; }, swipeDown:function(fn){ this.swipeDown=fn; }, tap:function(fn){ this.tap=fn; }, longTap:function(fn){ this.longTap=fn; } };

相關推薦

移動端點選事件、滑動事件、長按事件封裝

window.onload=function(){ $(".box").swipe(function(){ this.innerHTML='滑動'; }); $(".box").swipeRight(function(){ this.innerHTML

移動端點選事件、滑動不可用的坑~~

前兩天被一個問題坑了一整個下午，準確的說是被自己坑的，最後的結果還是很俗套的找到了原因除錯的時候，為了禁止頁面的滑動觸控事件，監聽了touchmove事件，然後在點選事件找到別的方法禁止掉後，忘掉把滑動

vue自定義移動端touch事件，點選、滑動、長按事件

**HTML** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="favicon.ico" mce_href="favicon.

一段封裝好的移動端點選事件的程式碼

/*封裝移動端的tap點選事件*/ var demo={ /*dom:傳入的dom元素讓我們可以為任意的元素新增tap事件*/ tap:function(dom,callback){ /*判斷是否傳入物件同時物件應該是一個dom元素*/ if(!dom

移動端點選事件300ms延遲問題解決方案——fastclick.js

 　　 　　移動端點選事件300ms延遲的問題由來已久，如下截圖 　　 　　下面截圖來自原文：https://www.jianshu.com/p/6e2b68a93c88   　   　　網上關於300ms延遲問題的解決方法，大致分為 3 種   　　

移動端點選事件延遲300ms解決方式

說明：移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。  以下是歷史原因，來源一個公司內一個同事的分享： 2007年蘋果釋出首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮

為RecyclerView新增優雅的點選事件、長按事件

本篇參考：Hugo的文章-Getting your clicks on RecyclerView 效果如下 一、完整的點選、長按事件支援類 先要準備一份resources res -> values ->

為RecyclerView新增點選事件、長按事件

本篇展示手機內已安裝的軟體資訊，並新增事件，效果如下 一、準備工作 儲存App資訊的bean public class AppInfo { public String name; // 應用名

Unity3D---UGUI---Button相關、點選、按下、擡起、長按事件

一、先介紹一下Inspector面板裡的東西 Button裡一共有兩個指令碼。 image.png Image（Script） 這個跟Image裡是一樣的 Button（Script） Interactable（互動）：Button是否可以點

小程式之解決移動端點選和長按事件冒泡問題

      如果我們希望一個物件被長按的時候不會觸發點選事件，如果你同時繫結上bindtap事件和bindlongtap事件的話這裡會有一個問題就是不管你有沒有點選，長按的時候就會觸發點選事件，我們有

移動端點選穿透和click事件300ms延遲問題

場景描述（類似）： 一個頁面裡存在A元素和B元素；B元素浮在A元素之上，A元素裡具有a標籤或者綁定了點選事件或表單元素；點選B元素後，隱藏或者刪除B元素；再B元素隱藏或者刪除的同時觸發A元素裡的a標籤或者點選事件；點選穿透的現象發生； 問題產生的原因分析： 當我們在觸

1.6.0 移除移動端點選事件延遲

1.6.1 double tap to zoom double tap to zoom （雙擊縮放） 當用戶點選螢幕以後，瀏覽器不能直接判斷使用者是點選操作，還是雙擊縮放，因此瀏覽器的做法是等待300ms來判斷使用者是進行了什麼操作。 互動的響應速度是移動端的使用者體驗

CSS3 修改和去除移動端點選事件出現的背景框 (tap-highlight-color)

最近研究移動端頁面時學到了很多CSS3的有用屬性，其中有一個印象比較深刻的屬性： -webkit-tap-highlight-color 這個屬性是用於設定元素在移動裝置（如Adnroid、iOS）上被觸發點選事件時，響應的背景框的顏色。 例如在Adnroid版本的

移動端點選事件延遲的誕生消亡史

快速反饋對於任何 UI 的實現都是至關重要的。研究表明，100ms 是介面讓使用者感到即時的最大延遲。儘管如此，行動網路仍然受到一個巨大的反饋問題的困擾：觸控任何元素後，延遲 300 毫秒。這種延遲是許多使用者認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中，本文將帶你瞭解移動端點選

百度地圖手機端單觸點單擊和長按事件，解決部分手機(小米手機)地圖單擊事件失效，多觸點、拖動依然觸發長按的bug

|| ble apply timeout console dto eat 問題 int /** * Author 嶽曉 * * 對百度地圖的事件擴展，目前擴展了fastclick和longclick, * 解決某些設備click不執行的問題

Extjs滑鼠長按事件（實現長按按鈕觸發事件的方法：mousedown、mouseup）

實現效果： 注：實現的效果其實就是監聽滑鼠長按的事件，當滑鼠左擊長按改變按鈕的樣式，當滑鼠放開之後還原按鈕的樣式。 實現方法： extjs: Ext.

Android系統中自定義按鍵的短按、雙擊、長按事件

在專案中碰到這樣的問題： 由於系統中的按鍵在底層做了重新定義或者新增了按鍵，此時需要在APP層對按鍵事件（keyevent）做分解處理，模擬Android系統做法，把keyevent分解成： 1、單擊事件：就是普通key的單擊； 2、雙擊事件：500ms內同一按鍵單擊兩次；

移動端長按事件

bsp alert efi fin ont params () word 超過 第一種方法：這個例子我獲取不到當前長按元素； $.fn.longPress = function(fn) { var timeout = undefined; var $t

h5移動端阻止瀏覽器長按事件

-1 ext clas move 事件 his 設置 urn log 移動端長按圖片或者元素的時候會出現默認的瀏覽器事件，這樣會影響自定義的長按行為，很麻煩。微信的圖片和元素的長按事件效果如下 找到了一個方式去掉首先要把圖片放到div的背景圖片中（用圖片試了不行，如果有大

移動端長按事件操作

fun 布局 nbsp right out ldr click z-index dom 之前在公司項目上用到長按，也用過jq mobile，好像與後端用的沖突，就沒用。 這個是長按當前的，當前DOM操作。 布局 <ul id="lis"> &l