关于移动端IOS active失效的处理

最新推荐文章于 2024-01-22 14:46:28 发布
转载 最新推荐文章于 2024-01-22 14:46:28 发布 · 238 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5bebcc58f265da612d18d2ba
文章标签：

#javascript #移动开发 #ViewUI

本文介绍了一种解决iOS设备上移动端页面active效果失效的问题。通过在body元素上添加touchstart和mouseover事件，可以有效恢复active状态，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在开发移动端页面的时候，发现ios下active失效，之前也写过很多，但是都很草率，在网上找了下方案，发现只要在body上设置touch和mouseover事件即可

<body ontouchstart="" onmouseover="">
复制代码

如果有更好的方案，请大家留言

记录点滴

转载于:https://juejin.im/post/5bebcc58f265da612d18d2ba

移动端热点问题
MingL520的博客
05-31 602
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
CSS3 动画中使用scale，在个别 iOS机型上不生效
sinat_37170738的博客
10-20 1824
CSS3 动画中使用scale，在个别 iOS机型上不生效。
移动端ios中active无效
糖果云专栏
09-11 945
方法一：body添加ontouchstart &lt;body ontouchstart=""&gt; 方法二：js给 document 绑定 touchstart 或 touchend 事件 &lt;style&gt; a { color: #000; } a:active { color: #fff; } &lt;/style&gt; &lt;a herf=foo &gt;b...
a:active在ios上无效解决方法
weixin_46020146的博客
10-02 156
a:active在ios上无效解决方法
ipad中的active失效？
weixin_34090562的博客
07-06 173
.btn1, .btn2{ border-radius: 1px; } .btn1:active, .btn2:active{ background-color: #b7e9e9; } js:<script> function shield(){ return false; } document.body.addEventL...
IOS下：active无效
diding6893的博客
06-14 307
IOS下：active无效，是因为该元素没有绑定touch事件。因此在IOS系统的移动设备中，需要在按钮元素或body/html上绑定touchstart/touchend绑定一个空的匿名函数即可 <script> var a=document.getElementsByTagName('a'); for(var i=0;i<a.length;...
移动端IOS点击事件失效解决方案
adz58294的博客
01-05 1045
解决方案 解决办法有 4 种可供选择： 1 将 click 事件直接绑定到目标元素（即 .target）上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 click 事件委托到非 document 或 body 的父级元素上 4 给目标元素加一条样式规则 cursor: pointer; 实际应用：第3方案靠谱 须将clic...
移动端兼容性问题集
maggie_live的博客
08-12 1011
1.input获取焦点时，页面被放大 // ios全屏 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0...
移动端知识点
m0_58225312的博客
11-03 356
最近又做到了移动端，怕自己忘记移动端的知识点，所以选用博客记载下，方便自己或他人查看 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 自适应 <meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览 <met...
移动端原生H5开发
谢鑫的博客
07-26 2033
移动端原生H5开发 配置项 1. Viewport &lt;!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 --&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt; &lt;!-- 针对一些不识...
移动端ios:active伪类无效的兼容解决方案
Alde_baran的博客
12-22 1942
苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主
visibilitychange ios设备不生效_如何调试支付宝(iOS)
weixin_39926311的博客
11-23 1263
作者丨帕巴拉来源丨掘金链接：https://juejin.im/post/5e8083d06fb9a03c621663df前言最近在做的一件事情，从代码层面分析下各家小程序(微信、头条、支付宝、百度)的启动性能，探究各家小程序的实现细节和差异。具体步骤如下：1、越狱砸壳获取ipa2、搭建调试壳工程3、注入callTrace分析代码4、hook小程序开始调用入口以及渲染完成入口, 加上ca...
H5切换后台导致倒计时不准确，两个解决方法（1、visibilitychange、2、和客户端配合）
qq_43471467的博客
11-02 1999
需求： 1、H5嵌入app，倒计时当前月剩余时间。 2、当前时间用后端返回的时间，不能使用手机系统时间，怕用户修改系统时间。 遇到的问题：app切换后台后，倒计时暂停，导致时间与实际不符。 1、visibilitychange visibilitychange - Web API 接口参考 | MDN mounted： //切后台，再次进入会回调 let _this = this; document.addEventListener...
关于苹果手机:active设置无效的问题
monkeyfly学前端
07-03 5893
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 今天早上群里有人提问：iphone 不兼容CSS的:active怎么破？ 我也是第一次听说这个问题，为了找到解决方法，于是去百度搜了一下。 原因 其实就是：苹果手机浏览页面中设置的css伪类：active失效了。 解决方法 在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个t...
IOS-生命周期-Swift
butterfly_new的博客
01-22 2574
唯一在此状态停留时间比较长的情况是：当用户锁屏时，或者系统提示用户去响应某些（诸如电话来电、有未读短信等）事件的时候。程序在后台而且能执行代码，大多数程序进入这个状态后会在在这个状态上停留一会，时间到之后会进入挂起状态(Suspended)，有的程序经过特殊的请求后可以长期处于Backgroud状态。当挂起时，程序还是停留在内存中的，当系统内存低时，系统就把挂起的程序清除掉，为前台程序提供更多的内存。虽然都有这些方法，但是我实测下来，在AppDelegate种有的方法并没有打印信息，也就说明没有被调用。
有关a标签link,hover,active失效的问题一点探究
薛定谔的猫
10-14 770
a标签的事件是有顺序的 先默认 后经过 最后按下不放如果要加上a:visited放在a:link 后面 但我在实际的学习上很少使用a:visited这个，因为他会覆盖a:link的样式。其实就一句话，出错就是你顺序错了，调整一下顺序就ok了。a:active就失效了。如果我们不按照这个顺序。
移动端:active伪类无效的解决方法
热门推荐
freshlover的专栏
02-11 4万+
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。 说到：active伪类就不得
解决active在苹果手机上失效的问题
lqx_520的博客
12-19 1965
active在苹果手机上失效的解决办法： 在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 Use the :active pseudo-class in your css, then add onto...
移动端填坑：ios系统点击事件失效的解决办法
lizheng_0508的博客
02-06 1万+
问题描述：在开发移动端页面的时候，经常会给元素添加点击事件，但在ios系统上会失效，以下是解决办法： 解决办法：给被点击元素添加 cursor:pointer; 样式即可，具体原理还未查到~
van-tabs在ios上没有动画
最新发布
05-13
可能需要检查van-tabs使用的动画是否依赖于这些属性，并且在iOS上是否存在需要添加的前缀或者特定的处理方式。比如，某些情况下需要添加-webkit-前缀来确保动画在Safari上正常运行。 另外，iOS的系统设置也可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值