資訊專欄INFORMATION COLUMN
摘要：現(xiàn)象這貨果然與眾不同，當(dāng)光標(biāo)焦點(diǎn)在時(shí)，點(diǎn)擊同頁面內(nèi)其他區(qū)域的，會導(dǎo)致焦點(diǎn)移動(dòng)到，從而觸發(fā)綁定在上的事件，如果中的值與之前不同，甚至還會觸發(fā)事件曾經(jīng)也有類似的問題，但在最新版中已經(jīng)修正了，而則完全沒有這樣的問題。
現(xiàn)象
IE這貨果然與眾不同，當(dāng)光標(biāo)焦點(diǎn)在input時(shí)，點(diǎn)擊同頁面內(nèi)其他區(qū)域的scrollbar，會導(dǎo)致焦點(diǎn)移動(dòng)到body，從而觸發(fā)綁定在input上的blur事件，如果input中的值與之前不同，甚至還會觸發(fā)change事件...
Chrome曾經(jīng)也有類似的問題，但在最新版中已經(jīng)修正了，而Firefox則完全沒有這樣的問題。
這個(gè)問題看起來微不足道，實(shí)際上影響還是非常大的，主要表現(xiàn)在下面2個(gè)方面
多數(shù)的suggest控件會出錯(cuò)suggest往往是通過input(輸入部分)和div(下拉框部分)組成。有時(shí)，下拉框內(nèi)容過多，用戶需要移動(dòng)滾動(dòng)條才能看全選項(xiàng)，但因?yàn)辄c(diǎn)擊滾動(dòng)條會讓input失去焦點(diǎn)，導(dǎo)致控件誤認(rèn)為用戶結(jié)束輸入，從而關(guān)閉suggest的下拉部分，導(dǎo)致用戶實(shí)際上無法正確的進(jìn)行滾動(dòng)條操作。
form這個(gè)更容易理解了，一般來說form的驗(yàn)證都是綁定在blur或者change事件上，如果form太長，需要移動(dòng)滾動(dòng)條才能看全的情況下，一旦鼠標(biāo)點(diǎn)擊滾動(dòng)條就會錯(cuò)誤的觸發(fā)form驗(yàn)證操作，將無用的錯(cuò)誤信息顯示給用戶。
解決方案我們來看看jQueryUI的Autocomplete是怎么解決這個(gè)問題的。
// input"s blur event
blur: function( event ) {
if ( this.cancelBlur ) {
delete this.cancelBlur;
return;
}
clearTimeout( this.searching );
this.close( event );
this._change( event );
}
// dropdown"s mousedown event
mousedown: function( event ) {
// prevent moving focus out of the text field
event.preventDefault();
// IE doesn"t prevent moving focus even with event.preventDefault()
// so we set a flag to know when we should ignore the blur event
this.cancelBlur = true;
this._delay(function() {
delete this.cancelBlur;
});
// clicking on the scrollbar causes focus to shift to the body
// but we can"t detect a mouseup or a click immediately afterward
// so we have to track the next mousedown and close the menu if
// the user clicks somewhere outside of the autocomplete
var menuElement = this.menu.element[ 0 ];
if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
this._delay(function() {
var that = this;
this.document.one( "mousedown", function( event ) {
if ( event.target !== that.element[ 0 ] &&
event.target !== menuElement &&
!$.contains( menuElement, event.target ) ) {
that.close();
}
});
});
}
}
這下就很清楚了，要處理這個(gè)問題，要點(diǎn)有兩個(gè)：
通過自定義的flag判斷是否需要跳過(直接return)input的blur事件
全局(document)監(jiān)視下一次mousedown事件，如果不是特定區(qū)域才執(zhí)行blur相關(guān)操作
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78584.html
摘要：本文全部使用內(nèi)容高度不夠時(shí)，依然顯示到最下面大概有這樣的結(jié)構(gòu)布局查看下面的不需要查看不定寬高的垂直水平居中首先，兼容性也不錯(cuò)可以，不想用時(shí)可以用垂直水平居中居中 本文全部使用 scss + autoprefixerBrower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-c...
摘要：表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設(shè)置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當(dāng)塊級內(nèi)容區(qū)域...
摘要：表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設(shè)置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當(dāng)塊級內(nèi)容區(qū)域...
摘要：端的是點(diǎn)擊，但是移動(dòng)端把事件當(dāng)作單擊。移動(dòng)端的是點(diǎn)擊事件不是端的點(diǎn)擊效果，存在的延遲，項(xiàng)目中我們需要解決這個(gè)延遲，使用手指離開處理點(diǎn)擊事件。 什么是事件 事件是元素天生具備的行為方式（和寫不寫JS代碼沒有關(guān)系），當(dāng)我們?nèi)ゲ僮髟氐臅r(shí)候會觸發(fā)元素 的很多事件。 事件綁定 1.什么是事件綁定給當(dāng)前元素的某一個(gè)事件綁定方法，目的是為了讓當(dāng)前元素某個(gè)事件被觸發(fā)時(shí)，可以做一些事情。2.事件綁定方...
摘要：解決方案可以解決在手機(jī)上點(diǎn)擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計(jì)方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點(diǎn)個(gè)變?yōu)閭€(gè)。 原文鏈接 - https://github.com/FrontEndRo... H5項(xiàng)目常見問題及注意事項(xiàng) Meta基礎(chǔ)知識： H5頁面窗口自動(dòng)調(diào)整到設(shè)備...
閱讀 1582·2021-11-02 14:42
閱讀 2321·2021-10-11 10:58
閱讀 670·2021-09-26 09:46
閱讀 2919·2021-09-08 09:35
閱讀 1418·2021-08-24 10:01
閱讀 1241·2019-08-30 15:54
閱讀 3613·2019-08-30 15:44
閱讀 1804·2019-08-30 10:49
