仅对图像启用右键单击自定义菜单

Question

我有图像显示在模态中。

    <div class="col-md-3 img-box">
    <input type="checkbox" id="image_23" name="pics[]" value="wave-2211925_640.jpg" data-id="image_23">
    <label for="image_23" style="background-image: url(uploads/wave-2211925_640.jpg)">
        <i class="glyphicon glyphicon-ok"></i>
     </label>
    </div>

我希望能够为单击的任何图像调出菜单。我需要获取图像的 id，因为右键单击选项应该是删除，为了删除正确的图像，我需要 id。

我已经试过了，但它不起作用。如果我将其更改为按钮类，那么它可以工作，但是当我右键单击图像时，我似乎无法让它工作。

.HTML：

<ul class="dropdown-menu context-menu">
  <li><a href="#">RELOAD</a></li>
  <li><a href="#">SETTINGS</a></li>
  <li><a href="#">LOGOUT</a></li>
</ul>
$(function() {
  $(".img-box").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });
    $('.context-menu').hide();
    $('.context-menu').slideDown(300);
    return false;
  });
  $( ".img-box" ).click(function(e) {
    $('.context-menu').slideUp(300);
  }); 
});

这是原始代码，如果您右键单击正文中的任何位置，则可以正常工作。

$(function() {
  $("html, body").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });
    $('.context-menu').hide();
    $('.context-menu').slideDown(300);
  
    return false;
  });
  $( "html, body" ).click(function(e) {
    $('.context-menu').slideUp(300);
  });
});

body {
  height: 100vh; 
  width: 100%; 
  
  display: flex; 
  justify-content: center; 
  align-items: center;
  
  user-select: none; 
  background-color: #2196F3; 
  color: #0D47A1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1> TRY RIGHT CLICKING </h1>
<ul class="dropdown-menu context-menu">
  <li><a href="#">RELOAD</a></li>
  <li><a href="#">SETTINGS</a></li>
  <li><a href="#">LOGOUT</a></li>
</ul>

图像框样式：

#gallery .img-box {
  text-align: center;
  position: relative
}
#gallery .img-box label i {
  position: absolute;
  display: none;
  color: green;
  top: 5px;
  right: 5px;
  font-size: 1em;
  border-radius: 50%;
  border: 2px solid green;
  padding: 2px;
}
#gallery .img-box label {
background: black;
  display: block;
  padding-bottom: 100%;
  min-height: 150px!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 15px;
}
#gallery .img-box input {
  display: none;
}

Answer 1

所以，根据评论和我发现的，你需要这样的东西，对吧？ 如果没有在评论中告诉我继续对话。

$(function() {
  $(".img-box").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });
    $('.context-menu').hide();
    $('.context-menu').slideDown(300);
  
    return false;
  });
  $( "html, body" ).click(function(e) {
    $('.context-menu').slideUp(300);
  });
});

body {
  height: 100vh; 
  width: 100%; 
  
  display: flex; 
  justify-content: center; 
  align-items: center;
  
  user-select: none; 
  background-color: #2196F3; 
  color: #0D47A1;
}
#gallery .img-box {
  text-align: center;
  position: relative
}
#gallery .img-box label i {
  position: absolute;
  display: none;
  color: green;
  top: 5px;
  right: 5px;
  font-size: 1em;
  border-radius: 50%;
  border: 2px solid green;
  padding: 2px;
}
#gallery .img-box label {
background: black;
  display: block;
  padding-bottom: 100%;
  min-height: 150px!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 15px;
}
#gallery .img-box input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="gallery">
<div class="col-md-3 img-box">
<input type="checkbox" id="image_23" name="pics[]" value="wave-2211925_640.jpg" data-id="image_23"> <label for="image_23" style="background-image: url(https://kbob.github.io/images/sample-3.jpg)"> <i class="glyphicon glyphicon-ok"></i> </label> </div>
</div>
<ul class="dropdown-menu context-menu">
  <li><a href="#">RELOAD</a></li>
  <li><a href="#">SETTINGS</a></li>
  <li><a href="#">LOGOUT</a></li>
</ul>