解决active样式在ios手机上没有生效的问题

最新推荐文章于 2024-03-12 15:28:44 发布

AzeShinja

最新推荐文章于 2024-03-12 15:28:44 发布

阅读量2.6k

点赞数 3

分类专栏： Vue 文章标签： ios

本文链接：https://blog.youkuaiyun.com/AzeShinja/article/details/121336285

版权

Vue 专栏收录该内容

55 篇文章

订阅专栏

这段HTML代码展示了如何通过添加空的ontouchstart和onmouseover事件监听器，以及使用@click指令来触发openLinkedMe方法，点击立即打开链接会执行相应操作。此方法常用于前端交互设计中。

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

<div class="button" ontouchstart="" onmouseover="" @click="openLinkedMe">
        <a :href="hrefUrl" id="openHeader"> 立即打开</a>
</div>

添加空的ontouchstart onmouseover 即可触发

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AzeShinja

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ios加载本地html,css样式失效问题

xtyzmnchen的博客

04-21

6133

项目中需要加载本地的html，在添加到工程中时，发现不显示本地的资源图片文件，而且样式也跟浏览器打开的不一样。初步判断是资源路径读取的问题。鉴于iOS沙盒机制的问题，这些资源文件在编译过程中，都被保存到同一资源路径下了。所以就需要我们修改html中图片资源的读取位置。如本地html中有如下代码图片不显示 src="images/icbcImg2.png" />

uniapp ios scroll-view中z-index失效的问题

最新发布

weixin_53236070的博客

10-28

684

uniapp ios scroll-view中z-index失效的问题

参与评论您还未登录，请先登录后发表或查看评论

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

学习笔记

12-02

2070

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

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

qq_25239049的博客

01-10

789

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

a:active在ios上无效解决方法

weixin_46020146的博客

10-02

149

a:active在ios上无效解决方法

ios不兼容CSS的active属性解决方法

weixin_30402085的博客

07-24

383

:active伪类是在类似'mousedown'事件触发的时机生效的，而手机上并没有'mousedown'事件，取而代之的只有'touchstart'和'touchend'。只需要给这个a链接的touch系列的任意事件touchstart/touchend绑定一个空的匿名方法即可hack成功 var a = document.getElementsByTagName('a');for...

移动端网页解决CSS的active伪类无效的方法

09-24

然而，开发者发现在iOS设备上，`:active`的样式并没有生效。这个问题的原因在于，默认情况下，Safari Mobile浏览器不会使用`:active`状态，除非元素本身或其父元素（通常是`<body>`）上绑定了`touchstart`事件监听器...

【uniapp/uview】解决 u-collapse 展开折叠的小箭头在有些型号的手机上不显示

花间半盘棋

03-12

977

折叠面板组件时，需要更改它自带的小箭头的样式，更改之后在有些型号的手机上不显示；观察样式后发现使用的是 unicode 字符，但是改了之后仍然不生效；使用 uview1 版本的。

vue+vant使用图片预览功能ImagePreview的问题解决

10-15

在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...

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

lqx_520的博客

12-19

1951

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

ios上z-index失效的原因

weixin_43795169的博客

05-14

774

做webapp的时候，需要做一个弹窗的遮罩层，但是给元素添加z-index的时候，android正常 ios上不生效，导致ios上有些内容没有被弹窗的遮罩层覆盖原因：被添加z-inex样式的元素的父元素样式中含有overflow：……，导致了ios中z-index不生效 ...

iOS:active或-webkit-tap-highlight无效的原因及解决方案

祝小余不定时更新

05-21

1051

通常，元素在按压态/点击态时会使用 :active伪类来设置特定的样式，这个操作在pc/Android上都没有问题，但 iOS上的点击事件（click）是模拟出来的，在iOS上使用 :active 伪类需要设置一个touch事件，这样元素的:active伪类才能被正确触发。一般是给body标签上加一个ontouchstart属性，但是但是~注意body的渲染范围，要保证元素上的touch事件能...

IOS下：active无效

diding6893的博客

06-14

289

IOS下：active无效，是因为该元素没有绑定touch事件。因此在IOS系统的移动设备中，需要在按钮元素或body/html上绑定touchstart/touchend绑定一个空的匿名函数即可 <script> var a=document.getElementsByTagName('a'); for(var i=0;i<a.length;...

移动端ios中active无效

糖果云专栏

09-11

929

方法一：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

1922

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

IOS-生命周期-Swift

butterfly_new的博客

01-22

2416

唯一在此状态停留时间比较长的情况是：当用户锁屏时，或者系统提示用户去响应某些（诸如电话来电、有未读短信等）事件的时候。程序在后台而且能执行代码，大多数程序进入这个状态后会在在这个状态上停留一会，时间到之后会进入挂起状态(Suspended)，有的程序经过特殊的请求后可以长期处于Backgroud状态。当挂起时，程序还是停留在内存中的，当系统内存低时，系统就把挂起的程序清除掉，为前台程序提供更多的内存。虽然都有这些方法，但是我实测下来，在AppDelegate种有的方法并没有打印信息，也就说明没有被调用。

【小程序】钉小程序在IOS16上CSS样式错误 - text-align-last: justify占一行

weixin_46096901的博客

10-19

1033

【小程序】钉钉小程序在IOS16上样式错误

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

monkeyfly学前端

07-03

5813

Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。前提今天早上群里有人提问：iphone 不兼容CSS的:active怎么破？我也是第一次听说这个问题，为了找到解决方法，于是去百度搜了一下。原因其实就是：苹果手机浏览页面中设置的css伪类：active失效了。解决方法在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个t...

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

qq_43639075的博客

05-23

1207

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