自定义html元素鼠标右键菜单
在触发快捷菜单事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的顶部和左值
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; script>
窗口。onload=function () {
var=. getelementbyid菜单(菜单);
document.body。oncontextmenu事件=function (e){//自定义体元素的鼠标事件处理函数
var e=e | | window.event;
e.preventDefault ();//阻止系统右键菜单IE8——不支持//显示自定义的菜单调整位置
让scrollTop=document.documentElement。scrollTop | | document.body.scrollTop;//获取垂直滚动条位置
让scrollLeft=document.documentElement。scrollLeft | | document.body.scrollLeft;//获取水平滚动条位置
menu.style。显示=翱椤?
menu.style。左=e。clientX + scrollLeft +“px”;
menu.style。=e。clientY + scrollTop +“px”;
}//鼠标点击其他位置时隐藏菜单
文档。onclick=function () {
menu.style。显示='没有';
}
}
& lt;/script>
& lt; style>
* {
保证金:0;
填充:0;
}
p {
margin-top: 200 px;
}
ul李{
list-style-type:没有;
保证金:10 px 0;
text-align:中心;
}
#{菜单
边界:1 px固体# ccc;
背景:# eee;
位置:绝对的;//设置菜单为绝对位置
宽度:100 px;
身高:120 px;
显示:没有;
}
& lt;/style>
& lt;/head>
& lt;身体比;
& lt; div id="盒子"祝辞让身体元素出现滚动条用的div
& lt; div id=安说ァ北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞分享& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在收藏& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞举报& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
实现效果
以上所述是小编给大家介绍的JavaScript自定义html元素鼠标右键菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
