vue+js实现鼠标右键页面时在鼠标位置出现弹窗
vue+js实现鼠标右键页面时在鼠标位置出现弹窗
·
首先是弹窗元素
<div class="tanchuang move-win1"
id="tanchuang1">
<el-button>111</el-button>
</div>
然后在需要弹窗的地方监听点击事件,可以将这个方法写在页面载入事件中
// 获取弹窗元素
var tanchuang = document.getElementById('tanchuang1');
// 右键点击事件
document.getElementById('lsb-table').addEventListener('contextmenu', function(event) {
event.preventDefault(); // 阻止默认的右键菜单
// 调用右键点击事件的方法
showContextMenu(event);
});
// 显示上下文菜单
function showContextMenu(event) {
// 设置弹窗的位置
tanchuang.style.display = 'block';
tanchuang.style.left = event.pageX + 'px';
tanchuang.style.top = event.pageY + 'px';
}
// 当点击其他地方时,隐藏弹窗
document.addEventListener('click', function(event) {
if (event.target !== tanchuang && !tanchuang.contains(event.target)) {
tanchuang.style.display = 'none'; // 隐藏弹窗
}
});
效果如图
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)