jquery - Selectivizr 导致选择下拉列表需要单击两次才能在 IE8 及更低版本中打开

Question

我最近在公司内部网站上实现了 Selectivizr，因为我们需要支持 IE7/8。不幸的是，我们的网站通过 jQuery/AJAX 加载大量动态内容。

为了解决这个问题，我重载了 jQuery 就绪函数，以便在 Selectivizr 执行指定任务后重新加载它。我的代码如下所示:

$(function () {
    if ($('body.ie8, body.ie7, body.comp-view8, body.comp-view7').length > 0) {
        (function () {
            var original = jQuery.fn.ready;
            var getSelectivizr;
            jQuery.fn.ready = function () {
                // Execute the original method.
                original.apply(this, arguments);

                clearTimeout(getSelectivizr);
                getSelectivizr = setTimeout(function () {
                    $.getScript(selectivizr);
                }, 50);
            }

        })();
    }
});

足够简单。然而，一位队友最近发现了一个似乎相关的错误。在 IE8/7 中，任何动态加载到页面中的选择下拉列表(我不确定静态下拉列表是否有效，并且这些页面都没有)，需要单击两次才能打开它。

更具体地说，在 IE8/7 中，第一次单击似乎“聚焦”在下拉列表上，而第二次单击则打开它。它的兼容性 View ，实际上会打开一瞬间，然后关闭。第二次单击可以正常打开它(只要您仍然专注于下拉列表)。

我曾认为这可能是 Selectivizr 正在做的事情的问题，因为它并不是真正设计用于处理动态加载的内容，但经过一点调试后，似乎是 setTimeout 导致了这种奇怪的情况行为。

我完全不知道如何在不删除我的 Selectivizr 实现的情况下解决这个问题。

可能值得注意的是，如果进行不同的 AJAX 调用，则必须使用 setTimeout 来防止浏览器多次尝试加载 Selectivizr，因为这可能会导致浏览器内出现严重的性能问题。

注意:这个问题没有准确反射(reflect)标题中所述的问题，所以我更新了它以提供更好的搜索!几周后回到这个问题后，我意识到我最初的调试使我走上了错误的道路。抱歉各位，但我已经提供了答案，希望对您有所帮助!:)

Answer 1

所以，我终于有机会回到这个错误上，似乎解决方案一直在我面前，由于我最初的调试搞砸了，我完全错过了它。

事实证明，这一直是一个选择性问题。不幸的是，对 IE8 及更低版本中的选择框进行任何类型的动态更改 (JS) 都会导致其重新绘制，从而强制其关闭(或永远不会打开，具体取决于版本/模式)。 selectivizr的工作方式是，它离散地为元素添加一个类，例如“slvzr-focus”，使用JS来模仿伪类的行为；在本例中为“:focus”。

因此，简单地限制 selectivizr 应用此类补丁来选择焦点上的框是有意义的。我的解决方案如下，尽管可能并不适合所有人(或者，您可以简单地确保 CSS 中不存在“:focus”选择器，这将导致 selectivizr 永远不会触发该事件):

1)在 selectivizr.js 中找到以下行:

if (!hasPatch(elm, patch)) {

    if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {

        cssClasses = toggleClass(cssClasses, patch.className, true);
    }

}

2)使用以下 if 语句将其括起来:

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) {
}

3)完成后，该 block 应如下所示:

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) {
    if (!hasPatch(elm, patch)) {

        if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {

            cssClasses = toggleClass(cssClasses, patch.className, true);
        }
    }
}

希望对那里的人有所帮助。

谢谢S/O!