WAP頁面點選與hover延遲解決之道

最近一直在wap端頁面的開發，一直都知道wap端點選相關問題存在延遲。之前做的網頁大部分使用a鏈結進行，一直未入此坑。

最近做的乙個wap**，各種點選，hover事件，如果使用pc端網頁的做法,直接使用js click事件與css中的hover偽類，視覺效果與使用者體驗很差。

click的坑:

存在延遲

移動端處理事件優先級別:

觸控事件 > 連續 > 點選事件

touch > douchtouch > click

chrome瀏覽器下解決方法最簡單粗暴:

initial-scale=1, 初始縮放為1

maximum-scale=1, 最大縮放為1

user-scalable=no, 禁止縮放

但同樣使用webkit核心的safri瀏覽器卻不生效。

ie也是有自己的解決方法的:

target: 

/* 如果整個網頁都不需要考慮放大縮小效果的話，直接附加在body上即可 */
body

document.getelementbyid('target').addeventlistener('touchend', function(), false);

:hover樣式不一定生效生效

由於手機瀏覽器並沒有滑鼠指標事件，w3c對此沒有明文規範，各個瀏覽器對於hover的處理不盡相同。

有的瀏覽器:hover 會生效，但是當觸控移出元素後hover還是會生效，再次開始觸控點選會移除hover效果。

有的瀏覽器只有在a連線元素上hover才會生效。

當然會想到：active這個偽類，然而在絕大部分手機瀏覽器下，並沒有什麼卵用。直接不支援 :：active偽類。

解決方法：

雖然手機瀏覽器中沒有滑鼠指標，但是有touch事件。

css增加hover樣式:

.target:hover,  .target.hover

var target= document.getelementbyid('id');

target.addeventlistener(』touchstart』, function(), false);
target.addeventlistener(』touchend』, function(), false);

css**:

.target:hover,  .target.hover

var hoverclass = 'hoverclass';  // hover樣式

var target = document.getelementbyid('target');
target.addeventlistener(』touchstart』, function(), false);
target.addeventlistener(』touchend』, function(), false);

css**:

.target:hover,  .target.hover

(function() ;

var els = document.queryselectorall(settings.selector),
hoverclass = settings.hoverclass,
callbacks = settings.callbacks;
var startcb = null, movecb = null, endcb = null;
/*** 觸控開始
*/if(hoverclass || callbacks.start)
if(callbacks.start) callbacks.start.call(null, el, event);
}for(var i=0; i呼叫示例
var touch = pfastcorres(,
move: function(el, event){},
end: function(el, event){}
}});// 若需要銷毀,呼叫銷毀方法
// touch.destory();

demo:

當然，如果只是單純的需要解決延遲點選問題，網上已有成型的外掛程式供使用

fastclick 其原理是使用事件委託在document節點新增touch檢測。不過**庫稍稍有點臃腫。

如果使用了zepto.js，可以使用$.tap 方法進行click處理,缺點是存在點透問題，改寫touch冒泡事件即可。

通過pyautogui實現頁面點選編輯等

自己寫的點東西 coding utf 8 import pyautogui size pyautogui.size print size 滑鼠移動到 10，10 位置，週期2秒 pyautogui.moveto 155,754,duration 1 滑鼠相對移動 週期多少 pyautogui.mov...

AJAX Js實現html頁面點選數自動更新

html 頁 aspx頁面 using system.web using system.web.security using system.web.ui using system.web.ui.htmlcontrols using system.web.ui.webcontrols using sy...

關於layui 彈出頁面。點選X之後的事件

layer.open success function 這是乙個彈出層的頁面，在layui中，點選 新增 功能鍵之後彈出這個頁面。但是有一種情況，是當我們點選x，關閉這個頁面，可能會導致，修改頁面的某些資料不顯示，如 描述 所以，這種情況下，我們需要在點選x之後，進行一下頁面重新整理 cancel ...