滑鼠長按事件和移動端長按事件
阿新 • • 發佈:2019-01-23
最近在做一個移動端的網頁,有一個需求是長按圖片在手機瀏覽器的長按事件觸發之前,圖片要發生一次改變,想到的解決方法是新增一個長按事件但是時間比手機瀏覽器的時間短,就可以在它之前觸發,因此在網上看到了兩種長安事件,一種是用onmousedown;另一種是ontouchstart;測試後發現onmousedown適用於pc端,ontouchstart適用於移動端。下面是它們實現長按事件的程式碼:(來源於網上其他大神的部落格)
第一種:onmousedown(源於:http://www.jb51.net/article/60675.htm)
var timeout; function down(){ sysAlert("down") timeout = setTimeout(function() { alert("滑鼠長按事件") },50); } function up(){ clearTimeout(timeout); }
第二種:(源於http://tieba.baidu.com/p/2677538856)
var timeOutEvent=0;//定時器 //開始按 function gtouchstart(){ timeOutEvent = setTimeout("longPress()",500);//這裡設定定時器,定義長按500毫秒觸發長按事件,時間可以自己改,個人感覺500毫秒非常合適return false; }; //手釋放,如果在500毫秒內就釋放,則取消長按事件,此時可以執行onclick應該執行的事件 function gtouchend(){ clearTimeout(timeOutEvent);//清除定時器 if(timeOutEvent!=0){ //這裡寫要執行的內容(尤如onclick事件) alert("你這是點選,不是長按"); } return false; }; //如果手指有移動,則取消所有事件,此時說明使用者只是要移動而不是長按 function gtouchmove(){ clearTimeout(timeOutEvent);//清除定時器 timeOutEvent = 0; }; //真正長按後應該執行的內容 function longPress(){ timeOutEvent = 0; //執行長按要執行的內容,如彈出選單
alert("手機長按事件")}