javascript - 在 IE11 Windows 8.1 上，单击后按钮仍然突出显示

Question

我正在开发一个(相对)复杂的 Web 应用程序，并遇到了一个非常具体的问题。在标题中提到的特定操作系统和浏览器上，在显示的一种形式中，当单击某些按钮时，它们保持“突出显示”，就好像鼠标仍在它们上方悬停一样，即使鼠标离开按钮元素或如果用户单击页面上的单独元素。它看起来像这样:



(“名字”、“姓氏”等元素是按钮)

这些按钮的具体行为是，当它们被单击时，它们会将特定的文本位放入显示的文本表单中，然后聚焦文本表单。这是使用一些标准 jQuery 函数(.val()、.focus() 等)完成的。在我见过的除 Win8.1/IE11 之外的任何操作系统/浏览器对上，都不会发生这种情况。 (它甚至不会在 Win7/IE11 上发生!)据我所知，除了单击按钮之外，没有其他处理程序附加到按钮上，并且似乎应用的唯一样式与大小、颜色、和文字。

老实说，我完全被这种行为难住了。我什至尝试过确保在按钮上调用 .blur()、触发 mouseout 事件等，但似乎没有任何影响。似乎导致突出显示消失的唯一事情是单击非常靠近按钮但不在按钮上，或者拖动选择一些文本。

编辑 2015 年 12 月 7 日 : 这一直是我的次要问题，还有其他更紧迫的问题需要处理。但我将尽我所能提供一个包含更多信息的不错的更新，以便希望能够解决这个问题。 (假设这不是 Windows 8.1 上特定版本的 IE 中的一些浏览器错误)

我已经验证了附加到按钮的唯一事件处理程序是在 HTML 本身中定义的 onclick 处理程序，方法是检查 IE11 的开发工具将其视为元素上的事件处理程序:

<input type="button" value="${someValue}" onclick="autoText('${token}');"/>

autotext是一个非常简单的函数，可以执行上述操作，但这里是它的实际源代码:

function autoText(token) {
  if(null != lastFocus) {
    var str = lastFocus.val(),
        tokenStr = '$\{' + token + '\}',
        newStr = str.substring(0, pos) +
          tokenStr + str.substring(pos, str.length);
    lastFocus.val(newStr);
    var lastPos = pos + tokenStr.length;
    lastFocus.focus();
    lastFocus.caret(lastPos);
    lastFocus.keypress();
}

在哪里 lastFocus设置为最后聚焦的文本输入元素，而 pos 设置为插入符号在文本输入元素中的位置。

具有 onclick 监听器的按钮位于以下层次结构中，由 Chrome 提供给我:html -> body -> div -> div#templateFormDiv -> form#prefsEmailTemplatesSave -> table -> tbody -> tr -> td -> input (其中 -> 表示它是父级)

html有类(class) mod-js mod-canvas mod-no-touch mod-postmessage mod-contenteditable mod-cookies mod-filereader mod-formvalidation mod-fileinput mod-formattribute mod-getusermedia

body没有 CSS 类

div有 ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable

div#templateFormDiv有类(class) hidden preferencesDialog ui-dialog-content ui-widget-content

form#prefsEmailTemplatesSave有类savePrefsForm

table , tbody , tr , td , 和 input没有任何与它们关联的类。

所有列出的类、ID 和标签的 CSS 规则如下:

*{padding: 0; margin: 0;}
body {
    margin:0;
    padding:0;
    height:100%;
    font-family:'Lucida Grande',Verdana,Arial,Sans-Serif;
    min-height: 100%;
    font-size: 62.5%;
    color: #333;
}
form {
    margin:0;
    padding:0;
}
.hidden {
    display: none;
}

据我所知，所有其他类都包含在 jQuery 中，或者作为 DOM 查询的标记。 (例如:savePrefsForm)

div#templateFormDiv通过 jQuery dialog() 附加了一个对话框称呼。

form.savePrefsForm被选中，并且所有找到的元素都有一个通过 jQuery 附加到它们的 ajaxForm。与此类似，#prefsEmailTemplatesSave如果 #templateFormDiv 被选中并提交对话框按下了保存按钮，并通过了一些验证逻辑。

我能想到的最后一件事是按钮所在的位置旁边有一个 TinyMCE 可编辑文本区域。没有父/子关系，而是 sibling 关系。

如果我这样做，我会尝试考虑任何重要的细节并包括它们，否则我只会回答任何人对正在发生的事情的任何进一步的问题。

Answer 1

在 IE 9-11 Windows 8.1-10 上有同样的问题。每个不会导致回发的按钮在单击后仍保持突出显示。在其他网站上的按钮工作正常，所以这显然是我的问题。我发现它是因为 CSS 选择器“悬停”在我的样式中:
.navigationLink:悬停{
}
我已将其更改为:
a.navigationLink:悬停{
}
现在按钮突出显示正常工作。我不明白这是什么魔法。任何帮助，将不胜感激。