提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

移动端，点击之后某个区域后有阴影

CSS
2023-04-18 14:48:39 时间

移动端，点击之后某个区域后有阴影

今天偶然发现一件很奇怪的事儿。

在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，

在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，

后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：

如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">


            div {
                /*关键代码*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .btn-blue {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #FFFFFF;
                background-color: blue;
            }

            .btn-blue-on {
                background-color: red;
            }
        </style>
    </head>

    <body>

        <div class="btn-blue">按钮</div>

        <script type="text/javascript">
            var btnBlue = document.querySelector(".btn-blue");
            btnBlue.ontouchstart = function() {
                this.className = "btn-blue btn-blue-on"
            }
            btnBlue.ontouchend = function() {
                this.className = "btn-blue"
            }

            btnBlue.onclick = function(){
                alert(123)
            }
        </script>
    </body>

</html>

相关文章