jquery easyUI右键菜单不同的地方展示不同的菜单

看到我的树菜单了吧，我是这样的，在tree上右键单击有菜单和不在tree上右键单击菜单
显示不同的右键菜单。就是这个意思

解决方案 »

  1.   

    如果你知道简单的阻止冒泡事件就不会提问了。这是一个很简单的问题。
    $(function(){
    $(document).bind('contextmenu',function(e){
    $('#dc').menu('show', {
    left: e.pageX,
    top: e.pageY
    });
    });

    $('#tt2').tree({
    url: 'tree_data.json',
    onContextMenu: function(e, node){
    e.stopPropagation();//阻止冒泡
    $('#mm').menu('show', {
    left: e.pageX,
    top: e.pageY
    });
    }
    });
    });
      

  2.   

    我是jquery1.26
    我是jquery easyUI 1.26
      

  3.   

    特意下载1.26测试。一点问题也没有呀。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $(document).bind('contextmenu',function(e){
    $('#dc').menu('show', {left: e.pageX,top: e.pageY});
    });  
    $('#tt2').tree({
    onContextMenu: function(e, node){
    e.stopPropagation();//阻止冒泡
    $('#mm').menu('show', {left: e.pageX,top: e.pageY});
    }
    });
    });
    </script>
    </head>
    <body>
    <ul id="tt2" class="easyui-tree" animate="true" dnd="true">
    <li>
    <span>Folder</span>
    <ul>
    <li state="closed">
    <span>Sub Folder 1</span>
    <ul>
    <li>
    <span><a href="#">File 11</a></span>
    </li>
    <li>
    <span>File 12</span>
    </li>
    <li>
    <span>File 13</span>
    </li>
    </ul>
    </li>
    <li>
    <span>File 2</span>
    </li>
    <li>
    <span>File 3</span>
    </li>
    <li>File 4</li>
    <li>File 5</li>
    </ul>
    </li>
    <li>
    <span>File21</span>
    </li>
    </ul>
    <div id="mm" class="easyui-menu" style="width:120px;">
    <div>树形菜单内右键</div>
    </div>
    <div id="dc" class="easyui-menu" style="width:120px;">
    <div>空白处菜单右键</div>
    </div>
    </body>
    </html>
      

  4.   

    但是浏览器的那种右键也会弹出来，比如查看源码之类的都有出现。但是浏览器的那种右键也会弹出来，比如查看源码之类的都有出现。搞定了，原来有一个阻止冒泡还有一个e.preventDefault();默认行为也阻止，return false又是阻止冒泡又是阻止默认行为，谢谢了
      

  5.   

    能在请教在空白处单击菜单，将tree不选中，在树上单击右键选中tree吗。
    我现在实现了在树上单击右键选中tree，
    $('#tt2').tree({
    checkbox: false,
    url: '/ocseat/channel/channelListJson.htm',
    onClick:function(node){
    node.select();
    },onContextMenu: function(e, node){
    e.preventDefault();
    e.stopPropagation();//阻止冒泡
    $('#tt2').tree('select', node.target);
    $('#menu1').menu('show', {
    left: e.pageX,
    top: e.pageY
    });
    }
    });
    当我在tree上单击右键的时候，选中了node节点，但是我在空白处单击右键好像
    始终无法去除这个node的选中。
      

  6.   

    $('#tt2').tree('getSelected');是获取被选择的菜单对象，没有对应取消选择的方法。个人觉得完全没必要去取消它。你根据你点的地方不同执行不同的函数即可。
    如果，万一你非要取消那个选择也不是不可以的：
    $(document).bind('contextmenu',function(e){
         $('#tt2').tree('reload');//重载当然会取消选择
         console.log($('#tt2').tree('getSelected'));//永远是null
    });
      

  7.   

    就是呀，外面你就找到树的root ID(方法是：getRoot)添加不就行了，为什么与当前选中有关系呢？ 
      

  8.   

    给页面上的任意div添加右击事件怎么添加呢？