Question

在第一次点击时，我正在获取警报tgid as target1和点击下载警报tgid，因为target1.problems在点击target2之后来到此处，警报是target2，点击下载警报是target1。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
     var tgid;
 // Menus
 function menu(tgid)
 {


alert(tgid);
var boxMenu = {
    name: "boxmenu",
    items: [{
        text: "|Download",
        command: function() {
                        // This is the menu option clicked
                        if ($(this).hasClass("active")) {

                            //here is the problem
                            alert("Clicked option 1 and target is: " + tgid);
                        }
                        },
        active: true
        },
        {
            text: "|Share",
            command: doSomeFunction,
            active: true
        },

        {
            text: "|New Folder",
            command: doSomeFunction,
            active: true
        },

        {
            text: "|Paste",
            command: doSomeFunction,
            active: true
        },

        {
            text: "|Cut",
            command: doSomeFunction,
            active: true
        },

        {
            text: "|Copy",
            command: doSomeFunction,
            active: true
        },

        {
            text: "|Rename",
            command: doSomeFunction,
            active: true
        },
        {
            text: "|Delete",
            command: doSomeFunction,
            active: true
        }


            ]
};
return boxMenu;
 }


// Example function of calling functions outside of a menu.
// Here "this" is going to refer to the option clicked.
function doSomeFunction() {
    if ($(this).hasClass("active")) {

//        alert(this.id);
        alert("calling external function"); 
    }
}



$("div").on("contextmenu",function(e){
    tgid=this.id;
//   alert(tgid);
    var boxMenu=menu(tgid);

    var newMenu = buildMenu(boxMenu,tgid);
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    // Menu not off screen to right
    if ((e.pageX + newMenu.outerWidth()) > winWidth)
        newMenu.css("left", winWidth - newMenu.outerWidth());
    else 
        newMenu.css("left", e.pageX);

    // Menu not off screen at bottom
    if ((e.pageY + newMenu.outerHeight()) > winHeight) 
        newMenu.css("top", winHeight - newMenu.outerHeight());
    else
        newMenu.css("top", e.pageY);

    newMenu.show();
    return false; 
});  
});

// Takes a menu variable and the target element, builds the HTML and returns a reference to the menu.
function buildMenu(menu, tgid) {

    if ($("#" + menu.name).length) {
        var m = $("#" + menu.name);
        m.hide();

        return m;
    }

    // Build overall menu
    var m = document.createElement("div");
    m.className = "menu";
    m.tgid = tgid;
    m.id = menu.name;
    //alert(m.tgid);
    // Build options for menu based on menu variable
    for (var i = 0; i < menu.items.length; i++) {
        var item = document.createElement("div");

        if (menu.items[i].active)
            item.className = "menuOption active";
        else
            item.className = "menuOption inactive";

        item.innerHTML = menu.items[i].text;
        item.onclick = menu.items[i].command;
//        alert(menu.items[i].command);
        m.appendChild(item);
    }

    $("body").append(m);  
    return $(m);
}

// Clears all menus when click the document (as an example)
// Make your own custom trigger for when you want to dismiss them.
$(document).bind("mouseup", function(e) {
   if (e.which == 1) { $(".menu").hide(); }
});

</script>
<style type="text/css">
#target {
    border: #c0c0c0 solid 1px;
    background-color: #f2f2f2;
    width: 100px;
    height: 100px;
}

.targetdiv {
    border: #c0c0c0 solid 1px;
    background-color: #FF0000;
    width: 100px;
    height: 100px;
}


.menu {
    position: absolute;
    display: none;
    border: #c0c0c0 solid 1px;
    font-family: calibri, arial, helvetica, sans serif;
}

div .menuOption {
    padding: 4px 8px;
    background-color: #f0f0f0;
}

div .active:hover {
    cursor: pointer;
    background-color: #99cb33;
    color: #ffffff;
}

div .inactive {
    color: #c0c0c0;
}

</style>
</head>
<body>


<div id="target1" class="targetdiv">target1</div>    


<div id="target2" class="targetdiv">target2</div>    


<div id="target3" class="targetdiv">target3</div>    
</body>
</html>

Answer 1

问题是你并不总是重新创建菜单。如果您重复使用它，command事件仍将指向选择的上一个菜单选项。你需要每次都建立它：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/8VU5u/2/

我还清理了buildMenu代码，使用jQuery创建菜单（更短更简单）。

 function buildMenu(menu, tgid) {

     var m = $("#" + menu.name);

     // remove existing menu if present
     if (m.length) {
         m.remove();
     }

     // Build overall menu
     var m = $('<div>').addClass('menu').attr('id', menu.name).data('tgid', tgid);

     // Build options for menu based on menu variable
     for (var i = 0; i < menu.items.length; i++) {
         var item = $('<div>').addClass('menuOption');

         item.addClass(menu.items[i].active ? "active" : "inactive");

         item.html(menu.items[i].text);
         item.click(menu.items[i].command);
         m.append(item);
     }

     $("body").append(m);
     return m;
 }

Answer 2

I have clean up my own code.and written without functions.and every time I removed the $("#boxmenu").remove(); 



<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Custom Right Click using jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
     $(document).ready(function() {
     $("#popup").hide();    
    var tgid;

    // Example function of calling functions outside of a menu.
    // Here "this" is going to refer to the option clicked.
    function doSomeFunction() {
        if ($(this).hasClass("active")) {

    //        alert(this.id);
            alert("calling external function and target is "+tgid); 
        }
    }
    function cll()
    {
        alert("alert");
    }
    function rename()
    {


      var winH = $(window).height();
       var winW = $(window).width();

        //Set the popup window to center
        $('#popup').show();
        $("#popup").css({"position":"absolute","left":winW/2-$('#popup').width()/2,"top":winH/2-$('#popup').height()/2});




    }
    function menu()
    {
          var boxMenu = {
        name: "boxmenu",
        items: [{
            text: "|Download",
            command: function() {
                            // This is the menu option clicked
                            if ($(this).hasClass("active")) {
                                //alert($(this).attr('id'));
                                alert("Clicked option 1 and target is: " + tgid);
                            }
                            },
            active: true
            },
            {
                text: "|Share",
                command: doSomeFunction,
                active: true
            },

            {
                text: "|New Folder",
                command: doSomeFunction,
                active: true
            },

            {
                text: "|Paste",
                command: doSomeFunction,
                active: false
            },

            {
                text: "|Cut",
                command: doSomeFunction,
                active: true
            },

            {
                text: "|Copy",
                command: doSomeFunction,
                active: true
            },

            {
                text: "|Rename",
                command: rename,
                active: true
            },
            {
                text: "|Delete",
                command: doSomeFunction,
                active: true
            }


                ]
    };
    return boxMenu;
    }



    $("div").live("contextmenu",function(e){
        $("#boxmenu").remove();
        tgid=this.id;
    //   alert(tgid);







        var boxMenu=menu();

        // Build overall menu
        var m = document.createElement("div");
        m.className = "menu";
        m.tgid = tgid;
        m.id = boxMenu.name;
        for (var i = 0; i < boxMenu.items.length; i++) {
            var item = document.createElement("div");

            if (boxMenu.items[i].active)
                item.className = "menuOption active";
            else
                item.className = "menuOption inactive";

            item.innerHTML = boxMenu.items[i].text;
            item.onclick = boxMenu.items[i].command;
    //        alert(menu.items[i].command);

            m.appendChild(item);
        }

            $("body").append(m);


        var m;
        if ($("#" + boxMenu.name).length) {
            m = $("#" + boxMenu.name);
            m.hide();

        }
        var winWidth = $(window).width();
        var winHeight = $(window).height();

        // Menu not off screen to right
        if ((e.pageX + m.outerWidth()) > winWidth)
            m.css("left", winWidth - m.outerWidth());
        else 
           m.css("left", e.pageX);

        // Menu not off screen at bottom
        if ((e.pageY + m.outerHeight()) > winHeight) 
            m.css("top", winHeight - m.outerHeight());
        else
            m.css("top", e.pageY);

        m.show();
        return false; 
    });  
    });


    // Clears all menus when click the document (as an example)
    // Make your own custom trigger for when you want to dismiss them.
    $(document).on("mouseup", function(e) {
       if (e.which === 1) { $(".menu").hide();
          $("#close").hide();
       }
    });

    </script>
    <style type="text/css">
    #target {
        border: #c0c0c0 solid 1px;
        background-color: #f2f2f2;
        width: 100px;
        height: 100px;
    }

    .targetdiv {
        border: #c0c0c0 solid 1px;
        background-color: #ece9d8;
        width: 500px;
        height: 100px;
    }

           table#popup
          {

              background-color:#cccccc;
            border:1px solid #999999;
            cursor:default;
            text-align:left;
            height:50px;
            width:394px;
            z-index:50;
            padding: 25px 25px 20px;
          }
    .menu {
        position: absolute;
        display: none;
        border: #c0c0c0 solid 1px;
        font-family: calibri, arial, helvetica, sans serif;
    }

    div .menuOption {
        padding: 4px 8px;
        background-color: #f0f0f0;
    }

    div .active:hover {
        cursor: pointer;
        background-color: #99cb33;
        color: #ffffff;
    }

    div .inactive {
        color: #c0c0c0;
    }

    </style>
    </head>
    <body>
    <div id="target1" class="targetdiv">target1</div>
    <div id="target2" class="targetdiv">target2</div>
    <div id="target3" class="targetdiv">target3</div>
    </body>
    </html>

点击target2后，问题就出现了，警报是target2，点击下载警报就是target1

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/8VU5u/2/