修复:在iOS设备上的悬停问题，普遍使用jQuery

Fix :hover issues on iOS devices, universally with jQuery

本文关键字：问题 jQuery 悬停 iOS 修复      更新时间：2023-09-26

目前我有以下问题，当我第一次点击的东西:悬停状态被触发，我比需要点击第二次，以便实际单击一个元素。我发现修复只针对一些元素，并且已经提供了一年或更早的时间。我想也许最近发生了一些事情，可以普遍解决这个问题?如果用户使用的是触屏设备，或许可以一次性删除所有悬停规则?

你确定:hover是正在发生的事情吗?css规则通常在

上
:hover, :focus

之类的。:hover在触摸设备上根本不应该发生，但是:focus会在链接被触摸时发生。你可以把悬停和聚焦规则分开。或者，您可以使用modernizr根据它在body元素上创建的类来检测触摸支持和样式。

谢谢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
        //
    }
};

这是更接近您要求的东西。它将从你解析的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){}
}
相关文章：