• 【IOS】点击按钮-去高亮-加点击效果


    (1)前提:html页面 ,手机端,

    (2)问题一:

    在iphone上(貌似是9以后。。),给div/span/...等元素上加onclick事件,根本不起作用,这是为啥捏?

    -- 在元素上加  cursor:pointer;  添加上后,系统会默认为这是一个可点击的元素。

    1
    cursor:pointer

      


    (3)问题二:

    在做手机页面时候,(iphone和安卓上都会有这个问题),点击一个按钮时,会出现的大黑块,特别不好看,怎么去掉大黑块儿呢?

    --在元素上添加 -webkit-tap-highlight-color属性后,就可以去掉默认的大黑块儿

    1
    -webkit-tap-highlight-color: transparent;

      


    (4)问题三:

    当我们去掉默认的大黑块儿后,要添加自己想要的点击时按住按钮的效果,用以下代码:

    1
    2
    3
    4
    span:active{
    box-shadow: inset 0 5px 10px #B41313,inset 0 -5px 10px #B41313;
    }
          

      

    添加完上述代码后,在安卓上,都可以看到想要的效果,但是iphone上依旧无动于衷。。。。。

    怎么办?

    经过查资料和实际测试后,发现,:active  需要一个触发事件才可以,于是乎,用以下代码:

    1
    2
    3
    4
    <script type="text/javascript">
    document.body.addEventListener('touchstart', function () {
    });
    </script>

      

    在页面上给一个监听事件,就可以触发:active,就可以兼容iphone上点击按下时的效果了!!!

  • 相关阅读:
    动态内存
    数组
    localstorage基础
    xampp 虚拟机配置
    浏览器兼容性问题积累
    做动画的一大接口 requestAnimationFrame
    canvas 基础
    svn--confilct了怎么办?
    【javascript设计模式】构造器模式、模块模式、单例模式
    关于优雅降级和渐进增强
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11481949.html
Copyright © 2020-2023  润新知