啓用禁用自定義右鍵菜單

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"); 
    } 
});