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

【问题标题】：On IE11 Windows 8.1, button remains highlighted after clicking在 IE11 Windows 8.1 上，单击后按钮仍然突出显示
【发布时间】：2016-01-07 18:51:34
【问题描述】：

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

（“名字”、“姓氏”等元素是按钮）

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

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

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

我通过检查 IE11 的开发工具所看到的元素上的事件处理程序，验证了附加到按钮的唯一事件处理程序是 HTML 本身中定义的 onclick 处理程序：

<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 -> @987654332 @ -> tbody -> tr -> td -> input（其中 -> 表示它是父级）

html 有课程 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 有课程 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。同样，如果#templateFormDiv 对话框按下了保存按钮并且它通过了一些验证逻辑，则#prefsEmailTemplatesSave 被选中并提交。

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

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

【问题讨论】：

你能分享一个小提琴吗？您是如何实现样式更改的？
据我所知，网页实际上并没有进行任何样式更改。按钮只是股票输入类型=按钮元素。唯一的定制是 HTML 本身中的 onclick=customfun('text') ，其作用如上所述。（将文本添加到输入字段，聚焦该字段）

标签： javascript jquery html css internet-explorer

【解决方案1】：

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

【讨论】：