Selectivizr导致选择下拉菜单需要在IE8及以下版本中打开两次

Question

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

为了解决这个问题,我重载了jQuery ready函数,在它执行任何设置的任务后重新加载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中,第一次点击似乎"关注"下拉列表,而第二次点击则打开它.它的兼容性视图,它实际上打开了一瞬间然后关闭.第二次点击打开它就好了(只要你继续关注下拉列表).

我认为它可能是Selectivizr正在做的事情的一个问题,因为它并不是真的设计用于动态加载的内容,但经过一些调试后,似乎是导致这种奇怪行为的setTimeout.

我完全失去了如何在不删除我的Selectivizr实现的情况下解决这个问题.

值得注意的是,如果进行不同的AJAX调用,则setTimeout是必要的,以防止浏览器多次尝试加载Selectivizr,因为这可能会在浏览器中导致严重的性能问题.

注意:这个问题没有准确反映标题中陈述的问题,所以我更新了它以提供更好的搜索!几周后回到这个问题后,我意识到我的初步调试让我走上了错误的道路.对不起,但我已经提供了一个答案,我希望对此有所帮助!:)

Answer 1

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

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

因此，简单地限制 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） 完成后，该块应如下所示：

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！