修复 iOS 设备上的 :hover 问题，通用 jQuery

Question

目前我遇到了以下问题，当我第一次点击某个东西时，会触发 :hover 状态，然后我需要第二次点击才能真正点击一个元素。我发现的修复程序仅针对某些元素，并且已在一年或更长时间前提供。我想也许最近发生了一些事情，可以普遍解决这个问题？如果用户在触摸设备上，也许可以一次性摆脱所有 :hover 规则？

Answer 1

你确定 :hover 是怎么回事吗？通常 css 规则会在

:hover, :focus

或类似的东西。 :hover 根本不应该在触摸设备上发生，但是 :focus 一旦链接被触摸就会发生。您可以将悬停和焦点规则彼此分开。或者，您可以使用 modernizr 针对它在 body 元素上创建的类来检测触摸支持和样式。

Answer 2

谢谢贾罗德！

您的代码运行良好，但复合 CSS 选择器除外。

我扩展了您的代码以使用复合选择器：

var disableCSSHoverSelectors = function (param_window) {
    'use strict';

    var css_style_rule_type, hover_expression, stylesheet_index, stylesheet, css_rules_index, css_rules, css_rule, parts, filtered_parts, parts_index, part;

    try {
        // Touch enabled?
        //
        if (('ontouchstart' in param_window) || ((param_window.DocumentTouch) && (param_window.document instanceof DocumentTouch))) {
            // Determine style rule type
            //
            css_style_rule_type = param_window.CSSRule.STYLE_RULE;

            // Define hover expression
            //
            hover_expression = /:hover/;

            // Iterate stylesheets
            //
            for (stylesheet_index = 0; stylesheet_index < param_window.document.styleSheets.length; stylesheet_index += 1) {
                stylesheet = param_window.document.styleSheets[stylesheet_index];

                // Iterate rules
                //
                css_rules = stylesheet.cssRules;
                if (css_rules === undefined) {
                    css_rules = stylesheet.rules;
                }
                for (css_rules_index = css_rules.length - 1; css_rules_index >= 0; css_rules_index -= 1) {
                    css_rule = css_rules[css_rules_index];

                    // Check rule type
                    //
                    if (css_rule.type === css_style_rule_type) {
                        // Expand compound selectors
                        //
                        if (css_rule.selectorText.indexOf(',') !== -1) {
                            parts = css_rule.selectorText.split(',');
                        } else {
                            parts = [ css_rule.selectorText ];
                        }

                        // Filter individual selectors
                        //
                        filtered_parts = [];
                        for (parts_index = 0; parts_index < parts.length; parts_index += 1) {
                            part = parts[parts_index];

                            if (!hover_expression.test(part)) {
                                filtered_parts.push(part);
                            }
                        }

                        // Update rule selectors or delete
                        //
                        if (filtered_parts.length > 0) {
                            css_rule.selectorText = filtered_parts.join(',');
                        } else {
                            stylesheet.deleteRule(css_rules_index);
                        }
                    }
                }
            }
        }
    } catch (ignore) {
        // Not fatal
        //
    }
};

Answer 3

这里有点接近您的要求。它将从您解析的 CSS 中删除悬停样式。

iOS :hover fix

// disable :hover on touch devices
// based on https://gist.github.com/4404503 
// via https://twitter.com/javan/status/284873379062890496
// + https://twitter.com/pennig/status/285790598642946048
// re http://retrogamecrunch.com/tmp/hover
if ('createTouch' in document)
{
    try
    {
        var ignore = /:hover/;
        for (var i=0; i<document.styleSheets.length; i++)
        {
            var sheet = document.styleSheets[i];
            for (var j=sheet.cssRules.length-1; j>=0; j--)
            {
                var rule = sheet.cssRules[j];
                if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText))
                {
                    sheet.deleteRule(j);
                }
            }
        }
    }
    catch(e){}
}