IOS手机伪类a:active失效：点击更改颜色，松开恢复

解决方案：OS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态

document.body.addEventListener('touchstart', function () { //...空函数即可});

IOS手机伪类a:active失效的更多相关文章

  1. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  2. react中IOS手机里面两个input同时存在时，聚焦focus失效解决办法

    最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...

  3. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  4. CSS的伪元素和伪类

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...

  5. IOS 伪类:active失效

    IOS中不兼容:active伪类,所以在状态控制上就会有问题,解决办法是,添加一个空的点击事件: 移动端添加:ontouchstart <a class="m-btn" on ...

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

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

  7. 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类

    2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...

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

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

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

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

随机推荐

  1. RN中webview的一些思考

    刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方 ...

  2. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  3. Ubuntu16.04源

    vim /etc/apt/sources.list # 阿里云deb cdrom:[Ubuntu 16.04 LTS _Xenial Xerus_ - Release amd64 (20160420. ...

  4. 六十七：flask上下文之Local线程隔离对象

    Local对象在flask中,类似于request对象,其实是绑定到了werkzeug.local.Local对象上,这样即使是同一个对象,在多线程中都是隔离的,类似的对象还有session以及g对象 ...

  5. python导入csv文件出现SyntaxError问题分析

    python导入csv文件出现SyntaxError问题分析 先简单描述下碰到的题目,要求是写出2个print的结果 可以看到,a指向了一个列表list对象,在Python中,这样的赋值语句,其实内部 ...

  6. Python的Multiprocessing多进程实例

    最近在拜读RBG大神的faster-rcnn源码时发现他用了多进程去分阶段处理神经网络,原因如下: # ------------------------------------------------ ...

  7. python高级篇

    1.切片功能:类似于java中的split方法.对list或者triple中几个值进行取出的过程. L = ['a','b','c','d']   L[0:3] = ['a','b','c']   # ...

  8. PI膜概述

    一.概述 1.简述 聚酞亚胺薄膜又称PI薄膜(polyimide filin)是一种含有酞亚胺或丁二酞亚胺的绝缘类高分子材料.是目前工程塑料中耐热性最好的品种之一. 2.发展简史 1908年,PI聚合 ...

  9. Leetcode之广度优先搜索（BFS）专题-773. 滑动谜题（Sliding Puzzle）

    Leetcode之广度优先搜索(BFS)专题-773. 滑动谜题(Sliding Puzzle) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary ...

  10. 网页制作入门——HTML(2)编码与字符实体

    在上一期,我们顺口提到了——你写的网页在打开后,可能发现只是一串乱码.那么这是为什么呢? 这就是编码的神奇力量! 八卦的启示——什么是编码? 编码的思想,很早就在中国诞生了,从还不太明朗的结绳记事.算 ...