資訊專欄INFORMATION COLUMN
摘要：現象這貨果然與眾不同，當光標焦點在時，點擊同頁面內其他區域的，會導致焦點移動到，從而觸發綁定在上的事件，如果中的值與之前不同，甚至還會觸發事件曾經也有類似的問題，但在最新版中已經修正了，而則完全沒有這樣的問題。
現象
IE這貨果然與眾不同，當光標焦點在input時，點擊同頁面內其他區域的scrollbar，會導致焦點移動到body，從而觸發綁定在input上的blur事件，如果input中的值與之前不同，甚至還會觸發change事件...
Chrome曾經也有類似的問題，但在最新版中已經修正了，而Firefox則完全沒有這樣的問題。
這個問題看起來微不足道，實際上影響還是非常大的，主要表現在下面2個方面
多數的suggest控件會出錯suggest往往是通過input(輸入部分)和div(下拉框部分)組成。有時，下拉框內容過多，用戶需要移動滾動條才能看全選項，但因為點擊滾動條會讓input失去焦點，導致控件誤認為用戶結束輸入，從而關閉suggest的下拉部分，導致用戶實際上無法正確的進行滾動條操作。
form這個更容易理解了，一般來說form的驗證都是綁定在blur或者change事件上，如果form太長，需要移動滾動條才能看全的情況下，一旦鼠標點擊滾動條就會錯誤的觸發form驗證操作，將無用的錯誤信息顯示給用戶。
解決方案我們來看看jQueryUI的Autocomplete是怎么解決這個問題的。
// 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();
}
});
});
}
}
這下就很清楚了，要處理這個問題，要點有兩個：
通過自定義的flag判斷是否需要跳過(直接return)input的blur事件
全局(document)監視下一次mousedown事件，如果不是特定區域才執行blur相關操作
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78584.html
摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...
摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...
摘要：端的是點擊，但是移動端把事件當作單擊。移動端的是點擊事件不是端的點擊效果，存在的延遲，項目中我們需要解決這個延遲，使用手指離開處理點擊事件。 什么是事件 事件是元素天生具備的行為方式（和寫不寫JS代碼沒有關系），當我們去操作元素的時候會觸發元素 的很多事件。 事件綁定 1.什么是事件綁定給當前元素的某一個事件綁定方法，目的是為了讓當前元素某個事件被觸發時，可以做一些事情。2.事件綁定方...
摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。 原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識： H5頁面窗口自動調整到設備...
閱讀 1565·2021-11-02 14:42
閱讀 2308·2021-10-11 10:58
閱讀 656·2021-09-26 09:46
閱讀 2908·2021-09-08 09:35
閱讀 1403·2021-08-24 10:01
閱讀 1228·2019-08-30 15:54
閱讀 3597·2019-08-30 15:44
閱讀 1792·2019-08-30 10:49
