HTML 关于 事件触发有感

如果你h5代码 里面设置了 边框圆角什么的 那你如果有 事件动作  只有看得见的地方点击才有效 ，，，， 但是布局上他还是一个盒子，边距什么的都算 ，他只是被裁剪了而已。

 

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>XianYu</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
            <!-- 只有点击到红色区域才会触发事件动作 -->
            <div class='s1' onclick="a()">
                
            </div>
            
            <!-- 可以看到这里布局是在下面的 所以布局没被  “裁剪” ！ -->
            <div>
                块状DIV
            </div>
            
            <style>
                .s1{
                    width: 200px;
                    height: 200px;
                    border-radius: 70%;
                    background-color: red;
                }
            </style>
            
            <script>
            var i = 0
                function a(){
                    window.alert('a')
                    console.log(++i);
                }
            </script>
    </body>
</html>
View Code

 

posted @ 2021-10-08 11:04  咸瑜  阅读(58)  评论(0)  编辑  收藏  举报