建设品牌网站的好处免费h5页面制作平台有哪些

主要用到 oncontextmenu 事件：

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

下面是自己写的小demo：

// prevent 禁用浏览器默认的右键事件
<div @contextmenu.prevent="rightClick"><div class="rightList"><div class="list_item" @click="rightOneClick">你瞅啥</div><div class="list_item">抽你咋地</div><div class="list_item">你在瞅一下</div><div class="list_item">瞅瞅就瞅瞅</div></div>
</div><style>#app {position: relative;width: 100%;height: 100vh;background-color: #eee;box-sizing: border-box;padding: 30px;}.rightList {position: absolute;left: 100px;top: 100px;width: 70px;background-color: #fff;padding: 10px 0;display: none;}.list_item {width: 100%;height: 35px;line-height: 35px;text-align: center;font-size: 14px;font-weight: 500;color: #333;}.list_item:hover {background-color: #ddd;cursor: default;}</style>

rightClick(e) {// 获取元素let rightlist = document.getElementsByClassName("rightList");// 再次点击之前先清除之前的rightlist[0].style.display = 'none';// 点击其他地方清除let coverHidden = () => {rightlist[0].style.display = 'none'document.removeEventListener('click',coverHidden,false)}let xw = e.offsetX;let yw = e.offsetY;rightlist[0].style.left = (xw - 35) + 'px';rightlist[0].style.top = (yw - 50) + 'px';// 显示rightlist[0].style.display = 'block';document.addEventListener('click', coverHidden)return false;
},

注意事项：

每次点击之前先清除之前的。

根据点击右键元素来定义右键菜单展示位置。

需阻止浏览器默认的右键事件。