1. 程式人生 > >ISO處理jq事件

ISO處理jq事件

win 什麽 click事件 stc comm fastclick 委托 圖片 style

jquery事件在IOS中不起作用並且事件有延遲

正文內容:

jq事件在IOS上,如果標簽本身不具備某些功能,而我們通過document或者body綁定上去的話,有些事件是不起作用的,同時在IOS上jq事件也存在延遲。

事件不起作用

這裏點擊事件為例,在IOS中本身默認不可點擊的元素,如(div, span),此時點擊事件會失效。

解決辦法

  1. 將click事件直接綁定到目標元素。
  2. 將目標元素換成 a 標簽或者 button 等可以點擊的元素。
  3. click事件委托到非 document 或者 body 的父級元素上。
  4. 給目標元素加一條樣式規則 cursor: pointer。

說明:

1、具體的方法按照自己的遇到的情況而決定。

2、如果動態增加的元素綁定事件的時候,如果離不開 document 或者 body 的話,為了避免事件,我們只能將操作的標簽換成 a 或者 button。

事件延遲

移動瀏覽器為什麽會設置300毫秒的等待時間呢?這與雙擊縮放的方案有關。平時我們有可能已經註意到了,雙擊縮放,即用手指在屏幕上快速點擊兩次,可以看到內容或者圖片放大,再次雙擊,瀏覽器會將網頁縮放至原始比例。

瀏覽器捕獲第一次單擊後,會先等待一段時間,如果在這段時間區間裏用戶未進行下一次點擊,則瀏覽器會做單擊事件的處理。如果這段時間裏用戶進行了第二次單擊操作,則瀏覽器會做雙擊事件處理。這段時間就是上面提到的300毫秒延遲。

解決辦法

方法一、進制縮放

<meta name="viewport" content="width=device-width user-scalable= ‘no‘">  

方法二、fastclick.js

FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之,FastClick 在檢測到touchend事件的時候,會通過 DOM 自定義事件立即觸發一個模擬click事件,並把瀏覽器在 300 毫秒之後真正觸發的click事件阻止掉。使用方法如下。

第一步:在頁面中引入fastclick.js文件。

<script src="fastclick.js"></script>

第二步:在js文件中添加以下代碼
在 window load 事件之後,在body上調用FastClick.attach()即可

  1 window.addEventListener(function(){
  2     FastClick.attach( document.body );
  3 },false );

如果你項目使用了JQuery,就將上面的代碼改寫成:

$(function() {    
    FastClick.attach(document.body);    
});  
方法三:指針事件

指針事件最初由微軟提出,現已進入 W3C 規範的候選推薦標準階段 (Candidate Recommendation)。指針事件是一個新的 web 事件系列,相應的規範旨在使用一個單獨的事件模型,對所有輸入類型,包括鼠標 (mouse)、觸摸 (touch)、觸控 (stylus) 等,進行統一的處理。
指針事件 (Pointer Events) 目前兼容性不太好,不知道在以後會不會更加支持。

ISO處理jq事件