做移動平台的應用,使用iscroll使屏幕上下滑動。發現當使用iscroll后,input等不能輸入內容了。只要在iscroll.js文件中加入如下代碼就ok了。
function allowFormsInIscroll(){ [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){ el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){ e.stopPropagation(); }) }) } document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
問題原因是:iscroll需要一直監聽用戶的touch操作,以便靈敏的做出對應效果,所以它把其余的默認事件屏蔽了。
以上代碼原理是:頁面加載完成后查找到所有的'input, select, button'元素並依次綁定'touchstart'或'mousedown'事件,在執行事件的時候停止事件的傳播,這樣行了。
使用了iscroll之后,你會發現點擊輸入框時不靈敏,經常無法聚焦;頁面文字也無法選擇和復制。這是由於iscroll要監聽鼠標事件和觸摸事件來進行滾動,所以禁止了瀏覽器的默認行為。
iscroll不分青紅皂白,禁止了瀏覽器的一切默認行為,導致上述問題。所以我們需要稍作修改:
onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) e.preventDefault(); },