js 页面动态创建一个坐标（图标）

问题来源

在一个地图中，使用鼠标点击，添加一个mark(图标)，来标识摄像头所在的位置

解决思路

添加一个div 元素在body最后，然后使用绝对定位（absolute），并让div的定位坐标与鼠标保持一致

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="./src/assets/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <style>
    .img-box {
      border: 1px solid red;
      height: 200px;
      width: 200px;
    }
    .flower-container {
      display: inline-block;
      position: absolute;
      height: 38px;
      width: 38px;
      background-image: url("./src/assets/flower.png");
    }
  </style>
  <body>
    <div class="img-box" onmousedown="getFlower(event)"></div>
    <div class="flower-container"></div>
  </body>
  <script>
    // 缓存 body 元素对象
    let bodyObj = document.getElementsByTagName("body")[0];
    // 鼠标按下，触发的事件
    function getFlower(event) {
      // 创建一个 DIV 元素对象
      let flowerContainer = createFlowerDiv(event);
      // 兼容性处理
      event = event || window.event;
      // 缓存 鼠标点击时 的位置
      let movex;
      let movey;
      if (event.pageX || event.pageY) {
        movex = event.pageX;
        movey = event.pageY;
      }
      // 将创建的 DIV 元素 的位置设置为鼠标点击的位置
      flowerContainer.style.left = movex + "px";
      flowerContainer.style.top = movex + "px";
      // 将添加的 div 元素，添加在body 元素最后
      bodyObj.appendChild(flowerContainer);
      // 将元素改为 jquery 对象
      let nDiv = $(flowerContainer);

      // 给document添加mouseup事件
      $(document).on("mouseup", dragMouseupEvent);
      // 给document添加 mousemove 事件
      $(document).on("mousemove", dragMousemoveEvent);
      // 松开鼠标，应该关闭绑定的 mousemove 和 mouseup 事件
      function dragMouseupEvent(e) {
        // mouseup结束后解绑mousemove
        $(document).off("mousemove", dragMousemoveEvent);
        // mouseup结束后解绑mouseup
        $(document).off("mouseup", dragMouseupEvent);
      }
      // 鼠标移动的时候，设置元素的坐标与鼠标坐标保持一致
      function dragMousemoveEvent(e) {
        nDiv.css({ left: e.pageX, top: e.pageY });
      }
    }

    // 创建 flower 对象
    function createFlowerDiv(event) {
      // 创建DIV 对象
      let divObj = document.createElement("div");
      divObj.setAttribute("class", "flower-container");
      // 创建IMG 对象
      // let imgObj = document.createElement("img");
      // imgObj.setAttribute("src","./src/assets/flower.png");
      // 将img 对象挂载到 div 对象下面
      // divObj.appendChild(imgObj);
      // 返回div 对象
      return divObj;
      // bodyObj.appendChild(divObj);
    }
  </script>
</html>

如果是绑定到元素上，鼠标移动会非常的卡？

解决办法

onmousemove 事件尽量绑定到document上

原因分析

事件是基于“冒泡”，因此把 onmousemove 事件绑定到document上比绑定到具体的元素上，效率要高很多

来源：CSDN

作者：胖鹅68

链接：https://blog.csdn.net/hbiao68/article/details/103811237

标签

event