IE 11選擇時單擊時失去焦點

Question

我正在制作一個電子表格，雙擊單元格將顯示“編輯”控件，使其具有焦點，並設置一個onblur事件處理程序以隱藏“編輯”控件並將該單元格的值設置為一旦失去焦點就控制。 假定的流程是用戶雙擊以調出編輯控件，選擇/輸入一個值，然后單擊/制表到其他內容，從而將焦點移到另一個元素上並觸發編輯控件的onblur處理程序。

除IE 10和11中的SELECT標記（Chrome和FF可以正常使用）外，它的工作原理都很好：每次我單擊克拉以放置下拉菜單時，SELECT都會失去焦點並觸發onb​​lur處理程序，然后隱藏該處理程序編輯控件，從而阻止我編輯值。

有誰知道這是為什么發生或如何解決？

我發現這篇博客文章描述了問題，並提出了向SELECT添加背景圖像的解決方案，但這似乎並不能解決問題（或者我做錯了）。

下面是我生成並將代碼插入到控件中的HTML的代碼。

/**Changes the contents of the cell to be its editing control instead of plain text.
@method SetCellEditMode
@param {String} mappingId: The Id of the PropertyMapping representing cell to switch over to edit mode.*/
this.SetCellEditMode = function (mappingId)
{
    if (this.Editing === true) return false;

    var cell = this.GetCell(mappingId);
    var tagType = null;
    if (cell == null) return false;
    var propInfo = cell.SourceObject.PropertyInfo;

    if (propInfo.IsReadOnly === true) return false;

    var innerHtml = null;
    if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Boolean)
    {
        innerHtml = makeBoolHTML(cell.SourceObject);
    }
    else if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Enum)
    {
        innerHtml = makeEnumHTML(cell.SourceObject);
    }
    else if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Number || propInfo.PropertyType === SDCMS.Resources.PropertyType.String)
    {
        innerHtml = makeStringEntryHTML(cell.SourceObject);
    }

    cell.Node[0].innerText = "";
    cell.Node.html(innerHtml);
    cell.Node[0].firstChild.focus();
    this.Editing = true;
    return true;
};



/**Makes the HTML for a boolean <select> control.
@method makeBoolHTML
@param {Object} propertyMapping: The SDCMS.Resources.PropertyMapping for which we are making an <select> control.*/
var makeBoolHTML = function (propertyMapping)
{
    if (propertyMapping == null) return null;
    var innerHtml = "<select mappingId=\"" + propertyMapping.Id + "\" onblur=\"SD_Click(event, 'SD_ChangeValue')\">" +
                        "<option>true</option>" +
                        "<option>false</option>" +
                    "</select>";

    if (propertyMapping.PropertyValue === true)
    {
        innerHtml.replace("<option>true</option>", "<option selected=\"selected\">true</option>")
    }
    else
    {
        innerHtml.replace("<option>false</option>", "<option selected=\"selected\">false</option>")
    }

    return innerHtml;
};

Answer 1

找到了解決方案。 事實證明，所有輸入/選擇類型節點都失去了焦點，而發生的事情是，當單擊表中的節點時，會將事件從控件冒泡到表單元格，然后該事件將獲得焦點並導致blur（）在內部控件上觸發。 解決方案是為onclick，onmousedown和onmouseup連接事件處理程序（很好的措施），這些事件處理程序除了preventDefault（）和stopPropagation（）之外什么也不做。 一旦事件停止傳播到包含表的單元格，一切都會按預期進行。

Answer 2

與其使用settimeout（）直接調用focus，不如將其間隔為1到10 ms。