树的右键弹出菜单怎么实现

我现在想在树上点击右键的时候弹出菜单？有相关例子吗？

解决方案 »

  1.   

    这和在body区点击弹出菜单有何区别，不就是触发位置不一样吗？
      

  2.   

    找了一段，L@_@K<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>超酷网页右键菜单</title> 
    <style> 
    body { 
    font-family: "宋体"; 
    font-size: 12px; 
    margin-left: 0px; 
    margin-top: 10px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    } 
    /*定义菜单方框的样式1*/ 
    .skin0 { 
    position:absolute; 
    padding-top:4px; 
    text-align:left; 
    width:100px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/ 
    border:2px solid black; 
    background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/ 
    font-family:"宋体"; 
    line-height:20px; 
    cursor:default; 
    visibility:hidden; /*初始时，设置为不可见*/ 
    } 
    /*定义菜单方框的样式2*/ 
    .skin1 { 
    padding-top:4px; 
    cursor:default; 
    font:menutext; 
    position:absolute; 
    text-align:left; 
    font-family: "宋体"; 
    font-size: 10pt; 
    width:100px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/ 
    background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/ 
    border:1 solid buttonface; 
    visibility:hidden; /*初始时，设置为不可见*/ 
    border:2 outset buttonhighlight; 
    } /*定义菜单条的显示样式*/ 
    .menuitems { 
    padding:2px 1px 2px 10px; 
    } 
    --> 
    </style> 
    <script language="javascript"> 
    <!-- 
    //定义菜单显示的外观，可以从上面定义的2种格式中选择其一 
    var menuskin = "skin1"; 
    //是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串 
    var display_url = 0; function showmenuie5() { 
    //获取当前鼠标右键按下后的位置，据此定义菜单显示的位置 
    var rightedge = document.body.clientWidth-event.clientX; 
    var bottomedge = document.body.clientHeight-event.clientY; //如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度 
    if (rightedge <ie5menu.offsetWidth) 
    ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth; 
    else 
    //否则，就定位菜单的左坐标为当前鼠标位置 
    ie5menu.style.left = document.body.scrollLeft + event.clientX; //如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度 
    if (bottomedge <ie5menu.offsetHeight) 
    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; 
    else 
    //否则，就定位菜单的上坐标为当前鼠标位置 
    ie5menu.style.top = document.body.scrollTop + event.clientY; //设置菜单可见 
    ie5menu.style.visibility = "visible"; 
    return false; 
    } 
    function hidemenuie5() { 
    //隐藏菜单 
    //很简单，设置visibility为hidden就OK！ 
    ie5menu.style.visibility = "hidden"; 
    } function highlightie5() { 
    //高亮度鼠标经过的菜单条项目 //如果鼠标经过的对象是menuitems，就重新设置背景色与前景色 
    //event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！ 
    if (event.srcElement.className == "menuitems") { 
    event.srcElement.style.backgroundColor = "highlight"; 
    event.srcElement.style.color = "white"; //将链接信息显示到状态行 
    //event.srcElement.url表示事件来自对象表示的链接URL 
    if (display_url) 
    window.status = event.srcElement.url; 
    } 
    } function lowlightie5() { 
    //恢复菜单条项目的正常显示 if (event.srcElement.className == "menuitems") { 
    event.srcElement.style.backgroundColor = ""; 
    event.srcElement.style.color = "black"; 
    window.status = ""; 
    } 
    } //右键下拉菜单功能跳转 
    function jumptoie5() { 
    //转到新的链接位置 
    var seltext=window.document.selection.createRange().text if (event.srcElement.className == "menuitems") { 
    //如果存在打开链接的目标窗口，就在那个窗口中打开链接 
    if (event.srcElement.getAttribute("target") != null) 
    window.open(event.srcElement.url, event.srcElement.getAttribute("target")); 
    else 
    //否则，在当前窗口打开链接 
    window.location = event.srcElement.url; 
    } 
    } 
    //--> 
    </script> 
    </head> <body> 
    <center> 
    <p>点击右键看看效果-<a href="http://www.webjx.com/" target="_blank">网页教学网</a> 
    </p> 
    </center> 
    <div onselectstart="return false" id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();"> 
    <div class="menuitems" url="javascript:history.back();">后退</div> 
    <div class="menuitems" url="javascript:history.forward();">前进</div> 
    <!--<hr> 
    <div class="menuitems" url="http://down.c06.net/" target="_blank">软件下载</div> 
    <div class="menuitems" url="http://s.c06.net/" target="_blank">六世搜索</div> 
    <div class="menuitems" url="http://site.c06.net" target="_blank">网址大全</div> 
    <hr> 
    <div class="menuitems" url="alert('六世软件下载站 http://down.c06.net');" target="_blank">关于本站</div> 
    <div class="menuitems" url="mailto:[email protected]">联系我们</div> -->
    </div> 
    </body> 
    </html> 
    <script language="JavaScript1.2"> 
    //如果当前浏览器是Internet Explorer，document.all就返回真 
    if (document.all && window.print) { //选择菜单方块的显示样式 
    ie5menu.className = menuskin; //重定向鼠标右键事件的处理过程为自定义程序showmenuie5 
    document.oncontextmenu = showmenuie5; //重定向鼠标左键事件的处理过程为自定义程序hidemenuie5 
    document.body.onclick = hidemenuie5; 
    } 
    </script>
      

  3.   

    http://blog.csdn.net/xuStanly/archive/2006/09/11/1207222.aspx