怎么用Javascript实现Agent

这篇文章主要为大家展示了“怎么用Javascript实现Agent”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用Javascript实现Agent”这篇文章吧。

既然是显示右键菜单，那么我们就要截获对精灵按右键时的事件oncontextmenu

然后将右键菜单的html封装到一个函数，一上来这个菜单层是隐藏的

function getMenuHtml()
{
var menuHtml ="

";
menuHtml += "

";
menuHtml += "";
menuHtml += "";
menuHtml += "";
menuHtml += "

";
menuHtml += "

";
return menuHtml;
}
实现右键菜单，我们需要精灵截获oncontextmenu事件，需要对昨天的run函数进行一点小的修改

Agent.prototype.run=function()
{
var agentHtml = "";
agentHtml += "";
agentHtml += getMenuHtml();
return document.write(agentHtml);
}

可以看出oncontextmenu调用的是showRightMenu函数，这个函数使菜单层可见，并且显示位置随着鼠标的位置而显示

注解：

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
event.clientX:鼠标点击的x轴位置
event.clientY:鼠标点击的y轴位置

/*
* 右键菜单 v1.0
* author: 清风
*/
function showRightMenu()
{
menu.style.left=document.body.scrollLeft+event.clientX
menu.style.top=document.body.scrollTop+event.clientY
menu.style.visibility="visible";
return false;
}

菜单现在可以显示了，如何使其消失呢？应当是用户点击任意位置就可消失

document.onclick=click
function click()
{
menu.style.visibility="hidden";
}

以上是“怎么用Javascript实现Agent”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！