Question

我正在处理图片库，导航控件有意与图像元素重叠。当用户右键单击其中一个导航控件对象时，我希望右键单击菜单可以反映用户右键单击图像元素时会看到的内容。我怎样才能做到这一点？我知道自定义上下文菜单对象已被弃用：https://stackoverflow.com/a/23930942/1455292

当我右键点击.nav-left或.nav-right时，我希望用户看到.photo的上下文菜单。

以下是问题的示例：https://jsfiddle.net/9u3ghpnv/

示例标记：

<div class="gallery">
<img class="photo" src="https://mdn.mozillademos.org/files/7707/circle2.svg" />
<button class="nav-left">L</button>
<button class="nav-right">R</button>
</div>

示例CSS：

.gallery{
position: relative;
margin: 0 auto;
width: 360px;
}

.photo{
display: block;
width: 360px;
height: 360px;
background-color: red;
}

.nav-left, .nav-right{
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
align-items: center;
color: lime;
font-size: 48px;
transition: all 0.5s;
background: none;
border: none;
text-align: center;
}

.nav-left{
left: 0;
}

.nav-right{
right: 0;
}

Answer 1

如果你在小提琴上上传的内容正是你所拥有的，你需要点击按钮，这样用户才能真正获得底层图像的上下文菜单。

pointer-events: none;

但是那些按钮现在不能用于任何目的，是吗？因为它们是不可点击的：/

所以现在你可能需要混合使用这些技巧，或者只需使用popover按钮和JS即可。

Answer 2

请检查一下，以了解我在说什么。

请注意，左上角有一个溢出菜单。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="gallery">
    <img class="photo" src="https://mdn.mozillademos.org/files/7707/circle2.svg" />
  <a href="#" id="overflow_menu" onclick="showMenuPanel(true)">
    <img src="http://developer.android.com/samples/ActionBarCompat-ListPopupMenu/res/drawable-xhdpi/ic_overflow.png" />
  </a>  
  <div id="photo_menu" class="menu">
    <a href="#" onclick="showMenuPanel(false)">close menu</a>
    <p>Put a list of contextual items here</p>
  </div>
    <div class="nav-bar-container">
      <a href="#" class="nav-button left">&#9664;</a>
      <a href="#" class="nav-button right">&#9654;</a>
    </div>
</div>
</body>
</html>

CSS

.gallery{
    position: relative;
    margin: 0 auto;
    width: 360px;
}

.photo{
    display: block;
    width: 360px;
    height: 360px;
    background-color: red;
}

.nav-bar-container {
  width: 100%;
    position: absolute;
    overflow: auto;
  clear: both;
  top: calc(90% - 50px);
}

.nav-button{
  padding: 24px;
  color: #eee;
  display: inline;
  background-color: rgba(0, 0, 0, .2);
  text-decoration: none;
}

.left {
  float: left;
}

.right {
  float: right;
}
.nav-button : link, visited {
  color: #eee;
}

.nav-button:hover{
  background-color: rgba(0, 0, 0, .3);
}

.menu {
  padding: 12px;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
  z-index: 15;
}
.menu a:link, a:visited, p {
  color: #eee;
}

#overflow_menu { 
  display: block;
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  top: 0px;
}
#overflow_menu img {
  width: 32px;
  height: 32px;
}
#overflow_menu:hover{
    background-color: rgba(0, 0, 0, .2);
}

JavaScript

function showMenuPanel(bShow){
  photo_menu.style.display = bShow ? 'block' : 'none';
}

链接到实时代码，以防它仍然存在：http://jsbin.com/riyowecaye

如何在非图像元素上使用图像上下文菜单？

2 个答案: