移动端:active伪类无效的解决方法【移动端 :active样式无效】2016-09-26  15:46:50

问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone【safiri Mobiles】下没有效果显示!

解决:看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。  

代码:

  

 //移动端:active伪类无效的解决方法
document.body.addEventListener('touchstart', function () {});

  

  

移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】的更多相关文章

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

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  2. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  3. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  4. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  5. Eclipse、MinGW、JNI编写C++生成dll, Java端调用的完整示例(附java.lang.UnsatisfiedLinkError解决方法)

     Eclipse.MinGW.JNI编写C++生成dll, Java端调用的完整示例(附java.lang.UnsatisfiedLinkError解决方法) 问题背景:之前的JNI编程都是基于And ...

  6. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  7. 微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

    在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input ...

  8. 移动端遇到的常见JS与CSS问题及解决方法

    由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...

  9. 移动端H5页面中1px边框的几种解决方法

    问题提出 这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1 ...

随机推荐

  1. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

  2. Onedrive 明年初基础容量缩小到5G,执行这一步骤避免(保持30G)

    Onedrive作为微软的云盘,相当实用,存储一些照片文档. 之前微软一直执行免费用户可以永久拥有30G空间(基础+开启功能获得). 但微软打算从明年开始减低这一优惠至5G. 不过最近微软有一些放松, ...

  3. java install

    http://www.cnblogs.com/a2211009/p/4265225.html

  4. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  5. mysql 同一IP 产生太多终端的数据库连接导致阻塞

    问题:null, message from server: "Host 'ip' is blocked because of many connection errors; unblock ...

  6. position窗口居中

    position的四个属性值: relative absolute fixed static 下面分别讲述这四个属性. <div id="parent">     &l ...

  7. 史上最简单的socket

    1. client import java.io.IOException; import java.io.OutputStream; import java.net.Socket; import ja ...

  8. MySQL数据库8 -子查询,联合查询

    一 使用IN关键字的子查询 问题: 查询游戏类型是'棋牌类' 的游戏的分数信息 - 游戏分数表中并未包含游戏类型信息 思路一:采用链接查询 思路二: 分两步进行,首先找到所以'棋牌类'游戏的编号,再以 ...

  9. c# System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本

    前几天遇到了这个问题,情景是与oracle数据库连接的时候出现的.本机已经安装了客户端,使用toad数据库工具能够与数据库相连进行相关的操作.但是在使用代码进行连接的时候出现了这样的问题.找了好久,都 ...

  10. MVC之路随记2--Razor基础

    1.概述:Razor是mvc 3.0新扩展的内容,是默认的视图引擎,引擎一词可理解为Web Form中<% %>中的变形,但是Razor更加干净,轻量级,简单.使用了该引擎后,文件的后缀名 ...