JS设置元素位置为元素点击的位置

视频地址：点此查看

今天我们使用JavaScript来实现

鼠标右键打开一个菜单

并且设置菜单的位置跟随鼠标的效果

首先我们把元素的基础样式写好

body,html{margin: 0;background-color: #41b0f9;}
ul>li{padding: 0px;list-style: none;}
.ul{position: fixed; padding: 10px;background-color: #fff;border-radius: 4px;box-shadow: 0px 0px 30px #eee;}
.li{cursor: pointer;padding: 10px 20px;color: #666;}
.li:hover{color: #09f;}

<ul class="ul">
  <li class="li">订单列表</li>
  <li class="li">个人中心</li>
  <li class="li">退出登录</li>
</ul>

为了使元素的位置能够动态改变

这里我们给ul设置了position为fixed

这时的效果是这样的

为了使鼠标右键的时候展示出来菜单

所以我们需要默认给菜单设置隐藏

这里设置display为none

.ul{ display:none }

这时候它就已经从页面上隐藏掉了

接下来我们需要设置JS(JavaScript)

首先监听页面的右键事件

document.addEventListener("contextmenu",function (e) {})

这里使用addEventListener来监听事件

他有三个参数

这里我们只说前两个

• 第一个参数是事件类型

鼠标右键的事件类型是contextmenu

• 也就是当触发这个事件我们需要执行的内容

回调函数有个事件参数
我们给他定为e

当我们鼠标在浏览器上右键时

会有默认行为

打开浏览器的默认弹窗

就像这样

显然我们是不需要的

先在事件回调函数中禁止这个默认行为

e.preventDefault();

这个时候鼠标右键不会有任何反应了

接下来设置需要执行的内容

首先找到这个菜单元素并让它显示出来

document.querySelector(".ul").style.display = "block";

然后设置元素的位置为鼠标点击的位置

也就是设置元素的定位left和定位top

document.querySelector(".ul").style.left = e.x + "px";
document.querySelector(".ul").style.top = e.y + "px";

最后我们的效果就实现了