div固定宽高实现上下左右居中，内外两个div点击事件（内部点击事件影响外部div点击事件）

最新推荐文章于 2024-05-18 16:20:54 发布

want be

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量170

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42446479/article/details/130721425

版权

1，div固定宽高实现上下左右居中

body中的代码

  <body>
    <div id="btn-focus">
      <!-- <div id="two"></div> -->
    </div>
  </body>

样式代码：三种方法，当然还有其他方法

      #btn-focus {
        width: 100px;
        height: 100px;
        background-color: #a05757;
        /*方法一 */
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /* 方法二 */
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
        /* 方法三 */
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto; */
      }

实现固定宽高元素在body或者其他div中上下左右居中。

2，两个div，一个大div一个小div，重叠，点击小div时也会触发大div的点击事件。

解决办法：1，使用点击事件的自带函数e.stopPropagation()；2，也是利用event中属性进行判断

代码：

      #btn-focus {
        width: 100px;
        height: 100px;
        background-color: #a05757;
      }

      #two {
        width: 50px;
        height: 50px;
        background-color: #100101;
        z-index: 99999;
      }


  <body>
    <div id="btn-focus">
      <div id="two"></div>
    </div>
  </body>

方法1：

    var btnFocus = document.getElementById("btn-focus");
    btnFocus.onclick = function () {
      console.log("12");
    };
    var btn2 = document.getElementById("two");
    btn2.onclick = function (e) {
      //使用e.stopPropagation()方法阻止冒泡
      e.stopPropagation();
      console.log("222");
    };

方法2：

var btnFocus = document.getElementById("btn-focus");
    btnFocus.onclick = function (e) {
      //第二种方法，判断在那个区域
      if (e.target.id == "btn-focus") {
        console.log("外");
      } else {
        console.log("内");
      }
    };
var btn2 = document.getElementById("two");
    btn2.onclick = function () {
      console.log("222");
    };