Question

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

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

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

老实说，我对这种行为感到十分困惑。我甚至尝试过这样做，确保在按钮上调用.blur（），触发mouseout事件等等，似乎没有任何东西可以解决这个问题。唯一可能导致突出显示消失的方法是单击非常接近按钮，但不要单击它们，或拖动选择一些文本。

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

我已经验证了附加到按钮的唯一事件处理程序是HTML本身定义的onclick处理程序，方法是检查IE11的dev工具在元素上看到的事件处理程序：

<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 - ＆gt; body - ＆gt; div - ＆gt; div#templateFormDiv - ＆gt; form#prefsEmailTemplatesSave - ＆gt; table - ＆gt; tbody - ＆gt; tr - ＆gt; td - ＆gt; input（其中 - ＆gt;表示它是父级）

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

我在这里要注意的最后一件事是，按钮所在的旁边有一个TinyMCE可编辑文本区域。没有父母/子女关系，而是兄弟姐妹关系。

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

Answer 1

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

在IE11 Windows 8.1上，点击

1 个答案: