修正：在iOS設備上懸停問題，通常與jQuery

目前我遇到以下問題，當我第一次點擊某事：懸停狀態被觸發，我不需要第二次點擊以實際點擊一個元素。我發現的修復只針對一些元素，並且在一年或更久之前提供。我想可能是最近發生的事情，這可以解決這個問題普遍？如果用戶在觸摸設備上，也許可以擺脫一切：懸停規則一次？修正：在iOS設備上懸停問題，通常與jQuery

來源

2013-05-01 Ilja

你確定：懸停是發生了什麼？通常的CSS規則將在

:hover, :focus

或類似的東西。：在觸摸設備上懸停不應該發生，但是：一旦鏈接被觸摸，焦點就會發生。你可以打破你的懸停和對焦規則。或者，您可以使用modernizr檢測觸摸支持和樣式，以針對它在body元素上創建的類。

來源

2013-05-01 20:31:43

它絕對徘徊，不同的是，它被應用到一個段落標記（長解釋，但該段起一個錨標籤）和當我點擊它時，我可以看到所有：懸停規則適用於它，但我必須點擊兩次才能激活它。 – Ilja 2013-05-01 21:46:26

這裏有點接近你的要求。它會從您的解析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){} 
}

來源

2013-09-07 05:49:34 Jarrod

@ user2909035將鏈接的代碼添加到答案將是一個合法的編輯，但是如果您要添加自己的代碼，則應該將其作爲新答案進行發佈（並附上一張註釋，以說明您正在擴展的答案）而不是編輯現有的答案。 – 2013-10-22 22:34:33

感謝賈羅德！

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

來源

2015-02-05 18:39:17 user2909035

修正：在iOS設備上懸停問題，通常與jQuery

回答

相關問題