用Popup对象构建自定义的网页右键菜单

最新推荐文章于 2022-09-14 17:20:51 发布

foamflower

最新推荐文章于 2022-09-14 17:20:51 发布

阅读量744

点赞数

分类专栏： JavaScript 文章标签： function div border javascript html 测试

本文链接：https://blog.csdn.net/foamflower/article/details/2805468

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

代码如下：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Popup对象实现右键菜单</TITLE>
<script language="JavaScript">
var oPopup = window.createPopup();
function contextMenu()
{

    var left = event.offsetX+10;
    var top = event.offsetY+10;
    oPopup.document.body.innerHTML = oContext.innerHTML;
    oPopup.show(left, top, 120, 80, window.document.body);

}
</script>
</head>
<body οncοntextmenu="contextMenu(); return false;">
<h1>Popup对象实现右键菜单</h1>
单击鼠标右键查看效果
<div ID="oContext" style="DISPLAY: none; BACKGROUND: #e4e4e4; ">
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
       <span οnclick='parent.location.href="http://www.zol.com.cn"'>
    中关村在线</span>
    </div>
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
    <span οnclick="parent.location.href='http://www.cfan.com.cn'">
    电脑爱好者</span>
    </div>
    <div οnmοuseοver="this.style.background='gold';"
         οnmοuseοut="this.style.background='#e4e4e4';">
    <span οnclick="parent.location.href='http://www.sina.com.cn'">
    新浪网</span>
    </div>
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
    <span οnclick="parent.location.href='http://www.xinhuanet.com'">
    新华网</span>
    </div>

</div>
</body>
</html>
注意红色部分，刚开始我在用dhtmlxtree构建的树上

//菜单测试
  function tonrightclick(id,e){
         // alert("=======id======="+id);
       if("rot"==id.substring(0,3)){
           oPopBody.innerHTML   =   "<span id='contextmenu' style='border:1px solid #666666;background:#eeeeee;width=55px;text-align:center;padding:0px;display:block;position:absolute' οnclick='window.newopenwindow()'>New</span> ";
                    oPopup.show(e.x,e.y,   55,   20,   document.body);

       }else{
           var idStr='"'+id+'"';
         // alert(idStr);
           oPopBody.innerHTML   =   "<span id='contextmenu' style='border:1px solid #666666;background:#eeeeee;width=55px;text-align:center;padding:0px;display:block;position:absolute' οnclick='window.del("+ idStr +")'>Delete</span> ";
                    oPopup.show(e.x,e.y, 55,   20,   document.body);
       }
   };

   function newopenwindow(){
      // alert(1);
       window.parent.open ('/DataManager/apps/doc/favorite/favoriteInfoAdd.jsp', 'newwindow2', 'height=200, width=400, top=200, left=600, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
   }

使用上面的代码总会报“对象不支持此操作”，把window换成parent就没问题了。

foamflower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Popup对象构建自定义的网页右键菜单

代码如下： Popup对象实现右键菜单var oPopup = window.createPopup();function contextMenu(){ var left = event.offsetX+10; var top = event.offsetY+10; oPopup.document.body.innerHTML = oContext.inn
复制链接

扫一扫