javascript - IE 11 选择焦点单击时失去焦点

Question

我正在制作一个电子表格，其中双击一个单元格会弹出“编辑”控件，为其提供焦点，并设置一个 onblur 事件处理程序以隐藏“编辑”控件并将单元格的值设置为控件失去焦点后的状态。假定的流程是用户双击以调出编辑控件，选择/输入一个值，然后单击/跳转到其他内容，从而将焦点移动到另一个元素并触发编辑控件的 onblur 处理程序。

它工作得很好，除了 IE 10 和 11 中的 SELECT 标签(Chrome 和 FF 工作正常):每次我点击 carat 以放下下拉菜单时，SELECT 都会失去焦点并触发 onblur 处理程序，它然后隐藏编辑控件，从而阻止我编辑值。

有谁知道为什么会发生这种情况或如何解决？

我找到了 this描述问题并提出向 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() 什么都不做。一旦事件停止传播到包含的表格单元格，一切正常。