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

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，因为右键单击选项应该是delete，并且为了删除正确的图像，我需要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>

​

img-box样式：

#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>

​