:touch CSS 伪类或类似的东西？答案

【问题标题】：:touch CSS pseudo-class or something similar?:touch CSS 伪类或类似的东西？
【发布时间】：2011-05-19 18:36:42
【问题描述】：

我正在尝试制作一个按钮，这样当用户单击它时，它会在按住鼠标按钮的同时改变其样式。如果在移动浏览器中触摸它，我也希望它以类似的方式改变其样式。对我来说看似显而易见的事情是使用 CSS :active 伪类，但这不起作用。我尝试了：focus，但也没有用。我尝试了：悬停，它似乎工作，但是在我将手指从按钮上移开后它保持了这种风格。所有这些观察结果都是在 iPhone 4 和 Droid 2 上进行的。

是否有任何方法可以在移动浏览器（iPhone、iPad、Android 以及希望其他浏览器）上复制该效果？现在，我正在做这样的事情：

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

:active 伪类用于桌面浏览器，active 类用于触摸浏览器。

我想知道是否有更简单的方法可以做到这一点，而不涉及 Javascript。

【问题讨论】：

几乎每个触控浏览器处理hover 和mousedown/mouseup 等内容的方式都不同，很难全部容纳。
Android 和 iOS 都有可以使用的 :touchstart、:touchmove、:touchend 和 :touchcancel 伪类。
我尝试为 :touchstart 和 :touchend 伪类设置样式，但它们在 iPhone 或 Droid 上不起作用。 @Paul Hanbury，您确定您没有将 CSS 伪类与 Javascript 事件混淆吗？
@mikez302 - 我认为你是对的。 plugins.jquery.com/plugin-tags/touchstart
我会觉得提交这个作为答案很愚蠢，但事实上，答案是“不，这不可能，你必须使用 Javascript。”您要求的不是 CSS2 或 CSS3 的一部分。我认为 :active 不起作用的事实是用户代理问题，您可能会报告为 iOS 和 Android 浏览器中的错误，但只是为了解决您的最终用户问题......是的，您必须使用 JS .您可以将兼容性代码包装在 check for ontouchstart support 中。

标签： javascript jquery html css mobile

【解决方案1】：

W3C 规范中没有:touch 这样的东西，http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active 应该可以工作，我想。

:active/:hover 伪类的顺序对于其正常运行很重要。

这是来自上述链接的引述

交互式用户代理有时会更改呈现以响应用户操作。 CSS 为常见情况提供了三个伪类：

:hover 伪类在用户指定元素时应用（使用一些指点设备），但确实不激活它。例如，一个视觉用户代理可以应用这个光标时的伪类（鼠标指针）悬停在生成的框上由元素。用户代理不支持互动媒体不必须支持这个伪类。一些符合标准的用户代理支持互动媒体可能无法支持这个伪类（例如，一支笔设备）。

:active 伪类在元素被激活时应用用户。例如，在用户按下鼠标的次数按钮并释放它。

:focus 伪类在元素具有焦点时应用（接受键盘事件或其他文本输入形式）。

【讨论】：

我知道没有 :touch 这样的东西。我想知道是否有类似的东西。 :active 似乎很合理，但在我的测试中不起作用。
@mikez302 - 我想你知道我想引用我的来源。我同意你的看法，除了我关于订单非常重要的观点之外，我看不出有任何原因它不起作用。我确实看到有人发布了一些关于 IOS 和 Android 的 css 伪选择器的内容，但我无法谈论这些技术。
我在示例中切换了 :active 和 :hover 规则，但它似乎没有做任何事情。
@mikez302 ：使用:active 伪类。它应该可以工作，但在某些浏览器中，您需要一个小技巧才能使其工作：将事件处理程序附加到主体上的 touchstart 事件（例如：<body ontouchstart="">）
只是在最后一个答案中触及@mikez302 评论，它们是链接到本文的 HTML5 Mobile Boilerplate 中的一个巧妙修复 - alxgbsn.co.uk/2011/10/17/…

【解决方案2】：

由于移动设备不提供悬停反馈，因此作为用户，我希望在点击链接时看到即时反馈。我注意到-webkit-tap-highlight-color 的响应速度最快（主观）。

将以下内容添加到您的正文中，您的链接将具有点击效果。

body {
    -webkit-tap-highlight-color: #ccc;
}

【讨论】：

这似乎是最可靠的，但看起来并不是最好的。背景颜色似乎从元素中延伸了一点，让它看起来更大。
@Adam 是的，我记得我无法解决这个问题，但这只是一秒钟的时间对我来说并不是什么大不了的事，尤其是它会让用户获得他点击的反馈（这对他们来说很重要）
我实际上是通过将一个函数绑定到 document.ontouchstart 事件（通过 jQuery）和一个空的回调来最终获得 :active 伪样式。
只是分享-webkit-tap-highlight-color 是Non standard CSS feature，我用:active 代替，它真的很合适且有意义。
-webkit-tap-highlight-color 正是我想要的，即在触摸 div 时控制它的背景颜色（至少在 Chrome/Electron 下）。 :active/hover/focus 对此不起作用。非常感谢！

【解决方案3】：

我在移动触摸屏按钮样式方面遇到了问题。这将解决您的悬停棒/活动按钮问题。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

【讨论】：