Question

简要说明：：仅当我右键单击$(".sim-row-edit").mousedown时才想显示右键菜单，下面是我的 jquery代码：

请注意-当我right click看到alert('Right mouse button!');消息但我看不到菜单时。

// Function to test right click
  $(".sim-row-edit").mousedown(function(e){ 
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
      // Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    // Avoid the real one
    event.preventDefault();
    // Show contextmenu
    $(".custom-menu").toggle(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 "first": 
            console.log("first"); 
            break;
        case "second": 
            console.log("second");
            break;
        case "third": 
            console.log("third"); 
            break;
    }
  });
      //return false; 
    } 
    //return true; 
  });

HTML菜单代码：

   <a href="#" class="sim-row-edit" data-type="link">Portfolio-</a>

    <!-- right click menu -->
    <ul class='custom-menu'>
      <li data-action = "first">First thing</li>
      <li data-action = "second">Second thing</li>
      <li data-action = "third">Third thing</li>
    </ul>

css菜单代码：

.custom-menu {
    display: none;
    z-index:1000;
    position: absolute;
    background-color:#fff;
    border: 1px solid #ddd;
    overflow: hidden;
    width: 120px;
    white-space:nowrap;
    font-family: sans-serif;
-webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    2px 2px 7px 0px rgba(50, 50, 50, 0.5);
box-shadow:         2px 2px 7px 0px rgba(50, 50, 50, 0.5);
}

.custom-menu li {
    padding: 5px 10px;
}

.custom-menu li:hover {
    background-color: #4679BD;
    color: #fff;
    cursor: pointer;
}

请让我知道我的jquery代码出了什么问题。

Answer 1

您需要在另一个处理程序上分开mousedown事件，并需要如下更改display属性，

$（“。custom-menu”）。css（“ display”，“ block”）;

完整的代码如下，

// Function to test right click
  $(".sim-row-edit").mousedown(function(e){
   console.log('ss');
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
	  
      // Trigger action when the contexmenu is about to be shown
	$(document).bind("contextmenu", function (event) {
		// Avoid the real one
		event.preventDefault();
		// Show contextmenu
		$(".custom-menu").toggle(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 "first": 
				console.log("first"); 
				break;
			case "second": 
				console.log("second");
				break;
			case "third": 
				console.log("third"); 
				break;
		}
	  });
	  $(".custom-menu").css("display", "block");
      //return false; 
    } 
    //return true; 
  });

Answer 2

I think you forget jQuery library:- 
I just made some small changes: - refer this link

      http://jsfiddle.net/raLn2uh9/5/

        <a href="#" class="sim-row-edit">test</a>
        <ul class='custom-menu'>
          <li data-action = "first">First thing</li>
          <li data-action = "second">Second thing</li>
          <li data-action = "third">Third thing</li>
        </ul>

在$（“。sim-row-edit”）。mousedown上显示右键菜单

2 个答案: