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

时间:2024-03-03 07:31:52

(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上点击按下时的效果了!!!