关于苹果手机:active设置无效的问题

最新推荐文章于 2024-07-22 21:15:15 发布

置顶 monkeyfly007

最新推荐文章于 2024-07-22 21:15:15 发布

阅读量5.5k

点赞数 2

分类专栏：遇到的问题文章标签： :active设置无效 iPhone不兼容:active

本文链接：https://blog.csdn.net/tel13259437538/article/details/80895678

版权

遇到的问题专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

今天早上群里有人提问：iphone 不兼容CSS的:active怎么破？
我也是第一次听说这个问题，为了找到解决方法，于是去百度搜了一下。

原因

其实就是：苹果手机浏览页面中设置的css伪类：active失效了。

解决方法

在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.（在您的css中使用:active伪类，然后添加ontouchstart=“”和onmouseover=“”到body标签。）

//非常简单
<body ontouchstart="" onmouseover="">
</body>

参考资料

移动端ios:active伪类无效的兼容解决方案
IOS兼容CSS:active效果
iphone safari浏览器CSS兼容性的解决方案集合
css - Hover effects using CSS3 touch events - Stack Overflow
iphone - :active pseudo-class doesn’t work in mobile safari - Stack Overflow

问题来了：vue该怎么绑？
答：使用v-on指令。即v-on:touchstart=""（如下图所示）

这里写图片描述

用法：<button v-on:click="say1()">点击1</button>
注：v-on指令相当于绑定事件的监听器。绑定的事件触发了，就可以指定事件的处理函数。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

monkeyfly007

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

iOS应用内购安全：生成共享密钥以验证收据+核对凭证内不能伪造的字段【解决IAP收据伪造问题】

iOS逆向与安全

03-05

631

服务端请求苹果凭证校验接口时，除了传receipt-data字段，再额外传一个password参数（苹果后台生成的共享密钥）。服务端相关文档https://developer.apple.com/documentation/appstoreservernotifications/responsebodyv2。APP 详细信息接口可用于检查版本: https://itunes.apple.com/cn/lookup?验证订阅或 App 内购买项目时，为提高通信安全，请在发送的收据中嵌入共享密钥。

H5开发：H5如何设置head头部与做到咯浏览器适配

最新发布

j2974500224的博客

07-22

601

每一个html元素都可以叫做盒模型。页面就是由一个个盒模型堆砌起来的。这样的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕。在CSS中，盒模型（Box Modle）是用来对元素进行设计和布局的，由内到外包含实际内容区、内边距、边框、和外边距四个部分。1）内容区Content用来放置文本或者子元素。2）内边距padding即内容区与边框的距离。3）边框border围绕在内边距外的边框。4）外边距margin边框以外的区域。

解决active在苹果手机上失效的问题

lqx_520的博客

12-19

1879

active在苹果手机上失效的解决办法：在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 Use the :active pseudo-class in your css, then add onto...

ios按钮添加点击:active效果不生效

qq_43639075的博客

05-23

1158

移动端开发的时候实现按钮的点击样式变化，但是在iphone下没有效果显示。原因是在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。方法一： document.body.addEventListener('touchstart',function(){}); 方法二： <body ontouchstart="" on...

移动端:active伪类无效的解决方法

qq_28265403的博客

04-10

1930

:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。说到：active伪类就不得

H5开发：常见H5开发兼容问题

Generon的博客

05-25

8511

1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也

vue里transition实现动画，在ios10.3上无效；打包后低版本安卓系统webview动画失效

不知不觉 | 笔记

07-25

4159

页面有个弹窗，我要实现的效果就是弹窗从底部滑上来，并伴随轻微的抖动效果。 HTML部分： &amp;amp;lt;transition name=&amp;quot;bounce&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;my-popup&amp;quot; v-show=&amp;quot;showPo

ASP实例开发源码—苹果(iphone)序列号和IMEI码查询系统.zip

11-18

ASP（Active Server Pages）是一种微软开发的服务器端脚本环境，用于创建动态网页或Web应用程序。这个实例开发源码——苹果（iPhone）序列号和IMEI码查询系统，旨在帮助开发者构建一个能够验证和查询苹果设备序列号...

苹果手机safari浏览器下:active失效

qq_25239049的博客

01-10

750

苹果手机safari浏览器下:active失效可以通过以下两种方法解决 1、document.addEventListener(‘touchstart’,function(){}); 添加touchstart事件 2、<div ontouchstart="" onmouseover=""></div> 标签内写入事件 ...

移动端ios中active无效

糖果云专栏

09-11

903

方法一：body添加ontouchstart <body ontouchstart=""> 方法二：js给 document 绑定 touchstart 或 touchend 事件 <style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >b...

移动端ios:active伪类无效的兼容解决方案

Alde_baran的博客

12-22

1836

苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主

手机端 :active 样式不起作用的原因，如何解决

学习笔记

12-02

1910

手机端 :active 样式不起作用的原因，如何解决一、原因很多时候我们在 PC 端使用很好的 :active 样式，在移动端却没有效果。原因是： :active 只有在 dom 元素被点击时，有 click 事件才会有的状态。除了 PC 端的 click 事件，移动端有 touch 事件，并且 touch 相关事件的优先级要高于 click 事件，如果 touch 事件被取消，就不会有 click 事件，所以才会产生移动端点击时没有 :active样式的原因。 MDN 相关说明，查看 Event

css的active事件在手机端不生效的解决方法

@必意玲

03-22

726

需求：需求就是实现点击图中的 “抽奖” 按钮，实现一个按钮Q弹的放大缩小动画。上面是实现的效果，pc端，点击触发。问题：但是这种方式在模拟器上可以，解决方案：在页面body添加一个。，下面是简单的demo代码。

iPhone 上怎么给CSS定义 active 样式(去除灰色外框)

我的技术博客

09-07

973

原文地址:https://www.cnblogs.com/liuhwater/p/6767561.html 如果给按钮定义 :hover 样式，在 iPhone 上按钮点击一次是 hover 态，再点击一次 hover 态才会消失，这不是我们想要的，继而想通过定义 :active 样式来实现按钮按下时的效果，但定义的 active 样式在 iPhone 上点击时没有任何效果只需添加一段 js...

iOS Web开发激活css的active伪类

weixin_30355437的博客

09-13

最近在做一个资讯客户端，用到UIWebview展示一些网页内容，本来想做一个简单的按压效果，发现在css中设置active属性一直不管用。查阅了一下资料，今天发现，要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。下面简单以一个文本作为例子： <!DOCTYPE html> <html> ...

重温CSS伪类，如何解决CSS的active伪类无效的问题

Sun_blog

08-05

387

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情前言在工作学习中，使用CSS伪类的情况还是很多的，今天就来重温一下，看看为什么有时候使用不好使。 CSS伪类伪类用于定义元素的动态状态，例如悬停(hover)、点击(active)等，伪类的名称不区分大小写，但需要以冒号:开头。 ``` /* 未访问的链接 */ ...

qt activewindow设置无效

03-07

对于这个问题，我可以回答。qt activewindow设置无效可能是因为当前窗口不是活动窗口，或者该窗口没有焦点。您可以尝试使用QWidget::activateWindow()函数来激活窗口，然后再设置activewindow。