ISO處理jq事件
jquery事件在IOS中不起作用並且事件有延遲
正文內容:
jq事件在IOS上,如果標簽本身不具備某些功能,而我們通過document或者body綁定上去的話,有些事件是不起作用的,同時在IOS上jq事件也存在延遲。
事件不起作用
這裏點擊事件為例,在IOS中本身默認不可點擊的元素,如(div, span),此時點擊事件會失效。
解決辦法
- 將click事件直接綁定到目標元素。
- 將目標元素換成 a 標簽或者 button 等可以點擊的元素。
- 將click事件委托到非 document 或者 body 的父級元素上。
- 給目標元素加一條樣式規則 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事件