Question

目前我遇到了以下问题，当我第一次点击某些内容时：悬停状态被触发，我需要点击第二次才能实际点击一个元素。我发现的修复程序仅针对某些元素，并且已在一年或更久前提供。我想也许最近发生了一些事情，它可以普遍解决这个问题吗？也许摆脱所有：如果用户在触摸设备上，一次悬停规则？

Answer 1

你确定：悬停是发生了什么吗？ css规则通常会在

上

:hover, :focus

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

Answer 2

这有点接近你的要求。它将从您解析的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){}
}

Answer 3

谢谢Jarrod！

除了复合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
        //
    }
};

修复：iOS设备上的悬停问题，通常使用jQuery

3 个答案: