启用禁用自定义右键菜单

Question

http://jsfiddle.net/CmJ9z/

我有一个复选框，如果已选中我希望有一个自定义的右键菜单，但如果它不具备默认浏览器的右键菜单。然而，一旦它没有被选中，自定义菜单仍会弹出，并且一旦再次检查，它将显示/隐藏/显示。

有人可以帮助解释我做错了什么？

任何帮助，非常感谢。

if ($("#tm").prop('checked') === true) { 
    // Trigger action when the contexmenu is about to be shown 
    $(document).bind("contextmenu", function (event) { 
     // Avoid the real one 
     event.preventDefault(); 
     $("#custom-menu").hide(100); 
     // Show contextmenu 
     if ($("#showcustom-menu").show() === true) { 
      $("#custom-menu").hide(100). 
      // In the right position (the mouse) 
      css({ 
       top: event.pageY + "px", 
       left: event.pageX + "px" 
      }); 
     } else { 
      $("#custom-menu").show(100). 
      // In the right position (the mouse) 
      css({ 
       top: event.pageY + "px", 
       left: event.pageX + "px" 
      }); 
     } 
    }); 

    // If the document is clicked somewhere 
    $(document).bind("mousedown", function() { 
     $("#custom-menu").hide(100); 
    }); 

    $("#custom-menu li").click(function(){ 
     // This is the triggered action name 
     switch($(this).attr("data-action")) { 
       // A case for each action. Should personalize to your actions 
      case "duplicate": alert("duplicate called"); break; 
      case "remove": alert("remove called"); break; 
      case "deselect": alert("deselect called"); break; 
     } 
    }); 
} else { 

} 
$("#tm").on('change', function() { 
    if ($(this).prop('checked') === true) { 
     // Trigger action when the contexmenu is about to be shown 
     $(document).bind("contextmenu", function (event) { 
      // Avoid the real one 
      event.preventDefault(); 
      $("#custom-menu").hide(100); 
      // Show contextmenu 
      if ($("#custom-menu").show() === true) { 
       $("#custom-menu").hide(100). 
       // In the right position (the mouse) 
       css({ 
        top: event.pageY + "px", 
        left: event.pageX + "px" 
       }); 
      } else { 
       $("#custom-menu").show(100). 
       // In the right position (the mouse) 
       css({ 
        top: event.pageY + "px", 
        left: event.pageX + "px" 
       }); 
      } 
     }); 

     // If the document is clicked somewhere 
     $(document).bind("mousedown", function() { 
      $("#custom-menu").hide(100); 
     }); 

     $("#custom-menu li").click(function(){ 
      // This is the triggered action name 
      switch($(this).attr("data-action")) { 
        // A case for each action. Should personalize to your actions 
       case "duplicate": alert("duplicate called"); break; 
       case "remove": alert("remove called"); break; 
       case "deselect": alert("deselect called"); break; 
      } 
     }); 
    } else { 

    } 
}); 

Answer 1

这样的：工作演示 =>http://jsfiddle.net/vLtgk/:)

需要unbind的文本菜单：

• http://api.jquery.com/unbind/

还是让我知道，如果我误解了什么，但是这将适合你编:)

代码

$(document).unbind("contextmenu"); 

全码

if ($("#tm").prop('checked') === true) { 
    // Trigger action when the contexmenu is about to be shown 
    $(document).bind("contextmenu", function (event) { 
     // Avoid the real one 
     event.preventDefault(); 
     $("#custom-menu").hide(100); 
     // Show contextmenu 
     if ($("#showcustom-menu").show() === true) { 
      $("#custom-menu").hide(100). 
      // In the right position (the mouse) 
      css({ 
       top: event.pageY + "px", 
       left: event.pageX + "px" 
      }); 
     } else { 
      $("#custom-menu").show(100). 
      // In the right position (the mouse) 
      css({ 
       top: event.pageY + "px", 
       left: event.pageX + "px" 
      }); 
     } 
    }); 

    // If the document is clicked somewhere 
    $(document).bind("mousedown", function() { 
     $("#custom-menu").hide(100); 
    }); 

    $("#custom-menu li").click(function(){ 
     // This is the triggered action name 
     switch($(this).attr("data-action")) { 
       // A case for each action. Should personalize to your actions 
      case "duplicate": alert("duplicate called"); break; 
      case "remove": alert("remove called"); break; 
      case "deselect": alert("deselect called"); break; 
     } 
    }); 
} else { 
    $(document).unbind("contextmenu"); 
} 
$("#tm").on('change', function() { 
    if ($(this).prop('checked') === true) { 
     // Trigger action when the contexmenu is about to be shown 
     $(document).bind("contextmenu", function (event) { 
      // Avoid the real one 
      event.preventDefault(); 
      $("#custom-menu").hide(100); 
      // Show contextmenu 
      if ($("#custom-menu").show() === true) { 
       $("#custom-menu").hide(100). 
       // In the right position (the mouse) 
       css({ 
        top: event.pageY + "px", 
        left: event.pageX + "px" 
       }); 
      } else { 
       $("#custom-menu").show(100). 
       // In the right position (the mouse) 
       css({ 
        top: event.pageY + "px", 
        left: event.pageX + "px" 
       }); 
      } 
     }); 

     // If the document is clicked somewhere 
     $(document).bind("mousedown", function() { 
      $("#custom-menu").hide(100); 
     }); 

     $("#custom-menu li").click(function(){ 
      // This is the triggered action name 
      switch($(this).attr("data-action")) { 
        // A case for each action. Should personalize to your actions 
       case "duplicate": alert("duplicate called"); break; 
       case "remove": alert("remove called"); break; 
       case "deselect": alert("deselect called"); break; 
      } 
     }); 
    } else { 
     $(document).unbind("contextmenu"); 
    } 
});