資訊專欄INFORMATION COLUMN
摘要：發(fā)現(xiàn)當(dāng)使用后，等不能輸入內(nèi)容了。這是由于要監(jiān)聽鼠標(biāo)事件和觸摸事件來進(jìn)行滾動(dòng)，所以禁止了瀏覽器的默認(rèn)行為。不分青紅皂白，禁止了瀏覽器的一切默認(rèn)行為，導(dǎo)致上述問題。
做移動(dòng)平臺(tái)的應(yīng)用，使用iscroll使屏幕上下滑動(dòng)。發(fā)現(xiàn)當(dāng)使用iscroll后，input等不能輸入內(nèi)容了。只要在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需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對(duì)應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了。
以上代碼原理是：頁面加載完成后查找到所有的"input, select, button"元素并依次綁定"touchstart"或"mousedown"事件，在執(zhí)行事件的時(shí)候停止事件的傳播，這樣行了。
使用了iscroll之后，你會(huì)發(fā)現(xiàn)點(diǎn)擊輸入框時(shí)不靈敏，經(jīng)常無法聚焦；頁面文字也無法選擇和復(fù)制。這是由于iscroll要監(jiān)聽鼠標(biāo)事件和觸摸事件來進(jìn)行滾動(dòng)，所以禁止了瀏覽器的默認(rèn)行為。
iscroll不分青紅皂白，禁止了瀏覽器的一切默認(rèn)行為，導(dǎo)致上述問題。所以我們需要稍作修改：
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();
},
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81876.html
摘要：只針對(duì)，因?yàn)榈臅簳r(shí)還不支持，會(huì)自動(dòng)選擇不用。原因還是和問題一樣的，因?yàn)槠帘瘟四J(rèn)事件。在技術(shù)上解決不了的問題，我認(rèn)為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個(gè)良好的方案。 1.在iscroll4的滾動(dòng)容器范圍內(nèi)，點(diǎn)擊input框、select等表單元素時(shí)沒有響應(yīng)這個(gè)問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對(duì)應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了，解決的方法是...
摘要：只針對(duì)，因?yàn)榈臅簳r(shí)還不支持，會(huì)自動(dòng)選擇不用。原因還是和問題一樣的，因?yàn)槠帘瘟四J(rèn)事件。在技術(shù)上解決不了的問題，我認(rèn)為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個(gè)良好的方案。 1.在iscroll4的滾動(dòng)容器范圍內(nèi)，點(diǎn)擊input框、select等表單元素時(shí)沒有響應(yīng)這個(gè)問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對(duì)應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了，解決的方法是...
摘要：前言這是一個(gè)存在很久的歷史問題了，對(duì)于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個(gè)什么別急，別急，接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的 前言 這是一個(gè)存在很久的歷史問題了，對(duì)于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個(gè)什么？ 別急，別急，接下來我們...
摘要：前言這是一個(gè)存在很久的歷史問題了，對(duì)于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個(gè)什么別急，別急，接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的 前言 這是一個(gè)存在很久的歷史問題了，對(duì)于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個(gè)什么？ 別急，別急，接下來我們...
閱讀 668·2023-04-26 00:33
閱讀 3689·2021-11-24 09:39
閱讀 3329·2021-09-22 15:34
閱讀 2517·2019-08-23 18:07
閱讀 3061·2019-08-23 18:04
閱讀 3929·2019-08-23 16:06
閱讀 3045·2019-08-23 15:27
閱讀 1742·2019-08-23 14:32
