基于HTML的padding错位导致点击事件出错原因及其解决思路

一，问题复现

    <div>
        <div class="测试盒子">
            <!-- <img src="1.png"  data-id="1" class="img" alt=""> -->
        </div>
        <div class="测试盒子" data-id="2">
            <!-- <img src="1.png"  data-id="1" class="img" alt=""> -->
        </div>
        <div class="测试盒子" data-id="3">
            <!-- <img src="1.png"  data-id="1" class="img" alt=""> -->
        </div>
        <div class="测试盒子" data-id="4">
            <!-- <img src="1.png"  data-id="1" class="img" alt=""> -->
        </div>
        <div class="测试盒子" data-id="5">
            <!-- <img src="1.png"  data-id="1" class="img" alt=""> -->
        </div>
    </div>

        其中先将img标签注释，用来展示div框架

    <script>
        var divs = document.querySelectorAll('.测试盒子');
        for(div in divs){
            divs[div].onclick = function(){
                console.log(this.dataset.id);
            }
        }
    </script>

        注册一个点击事件，点击盒子时输出data-id

    <style>
        .测试盒子{
            width: 50px;
            height: 100px;
            border: 2px solid black; /* 注释此条以隐藏div
            float: left;
        }
        /* .img{
            width: 100px;
            height: 100px;
            padding-left: 100px ; 此处为问题所在
        } */
    </style>

        整体定义完毕，先看一下框架的效果

        没什么问题，把注释的放开，隐藏掉div

        

        页面的显示效果中，图像被完全展示出来，两端有间隔，确实是我们想要的显示效果

        注：实例视频见文章顶部

        但是当我们点击的时候会发现，点击第一个图片控制台输出的是2，点击最后两张图片是，输出都为5

二，问题解析

        由于图片大小小于或正好等于padding，且padding为每个图片都携带的属性，且再被点击时padding也计算在点击体积内，当我们给div添加上border后可以发现

        示例图

        点击的有效范围中，第一个格子为空白，二图片在第二个格子内

        原理

                padding所隔开的区域会算在有效点击体积内，与其相对的margin所隔开的区域不会算在有效点击体积内

三，解决问题

               将padding改为margin