如何在鼠标点击位置动态追加DOM实现添加定位标记功能

存在的问题 #

• 缺少Font Awesome图标库依赖，代码中使用的fa fa-location图标类无法被识别渲染，看不到标记内容
• 追加的<i>标签未设置定位相关样式，默认静态定位下top/left属性不生效，标记无法出现在点击位置
• 注释掉的定位代码本身语法错误，没有选中要设置样式的DOM元素
• 未做点击位置的偏移修正，图标默认会以左上角对准点击位置，视觉上和预期点击点有偏差

调整方案 #

1. 调整HTML引入内容

补加Font Awesome的样式引入，确保图标可以正常渲染：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2. 调整CSS代码

给标记设置通用样式，同时给body开启相对定位作为定位参照物：

html,body{
  height:100%;
  margin: 0;
  position: relative;
}
.click-pin {
  position: absolute;
  font-size: 24px;
  color: #f43f5e;
  /* 修正偏移，让图标尖端对准点击位置 */
  transform: translate(-50%, -100%);
  /* 防止图标挡住后续点击事件 */
  pointer-events: none;
}

3. 调整JS代码

给追加的图标加上自定义类，同时绑定点击位置的坐标属性：

$("body").click(function(e) {
  console.log("%c ______________________________", "background: linear-gradient(45deg, red, yellow, blue, green, purple)");
  console.log("e.pageX", e.pageX);
  console.log("e.pageY", e.pageY);
  $("body").append(`<i class="fa fa-map-marker click-pin" style="left: ${e.pageX}px; top: ${e.pageY}px"></i>`);
});

内容的提问来源于stack exchange，提问作者code-8