重叠的DIV元素和onclick

Question

我将要用HTML、JavaScript和CSS编写自己的交互式教程。现在我有一个想法，创建一个DIV元素来表示一个发光的矩形，以标记特定区域。问题是当我改变发光矩形的位置时，为了突出显示可点击的元素，发光矩形会重叠在可点击的元素上面。因此，可点击的元素不再可点击。有没有一种方法可以“禁用”发光矩形，使其可见但不再阻挡底层元素？ 以下是我的代码：

<div id="hauptteil">
    <div id="block" onclick="step2();" style="cursor: pointer">

    </div>

    <div id="glowDiv">
         <div id="glow" class="glow"><img src="images/transBlock.png"/></div>
    </div>                
</div>

这里是 CSS 代码：

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}

.glow {
   margin: auto;
   width: 147px;
   height: 90px;

   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;  
   border-radius: 15px;

   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

#block {
   width: 50px;
   height: 50px;
   background: red;
}

为了更好地解释我的问题，在我的页面上，我有一个DIV元素，它显示为红色块。当我开始我的教程时，我改变了发光DIV的位置，以覆盖红色块。因此，看起来红色块正在发光。

- Ka.I.Z

---

为什么不将额外的发光样式应用于活动div，而是试图重叠元素呢？ - Brian Flanagan

可能是重复的问题https://dev59.com/j3NA5IYBdhLWcg3wVcFx - Michael Blancaflor

我原以为突出特定区域很容易，但也许你的建议更好。 - Ka.I.Z

Answer 1

回到2013年，你必须使用脚本来解决这个问题，但现在，pointer-events得到了广泛支持。请使用它！

---

通常情况下，您只需要使用pointer-events CSS属性。猜猜怎么着？IE不支持它...然而，在我们朋友jquery的帮助下，我们可以模拟它！

我的方法是在发光效果（绝对定位的div）中捕获点击事件，并检查是否有任何其他元素重叠鼠标单击的x-y坐标。

警告：前方有jQuery！

首先，只需捕获点击事件：

$('.glow').on('click', function(e) {  // our trick here });

然后确定鼠标光标的坐标。很容易，因为jQuery通过事件对象给出了坐标。

var cursorX = e.pageX;
var cursorY = e.pageY;

现在我们需要遍历所有可能位于我们想要接收点击事件的发光 div 下面的 dom 元素。

$('.class-possibly-below').each(function(index, element) { // our calculations here });

如果我们可以获取相对于窗口的位置，以及它的宽度和高度，我们就可以计算出在点击时光标是否悬停在其上。在这种情况下，我们的cursorX和cursorY值将位于我们正在遍历的DOM元素的left-position和left-position + width之间（以及top-和height分别）。再一次，jQuery有所帮助：

var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();

我们使用offset()而不是position()，因为后者返回相对于其父元素的位置。我们分别使用outerWidth()和outerHeight()代替width()和height()，因为前者还包括填充和边框。 现在检查x和y坐标是否在范围最小值和范围最大值之间。如果是，则触发此元素上的点击事件。

if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
    $(element).trigger('click');
}

你想要一些操作吗？看看这个fiddle！

- giorgio

---

太棒了，这现在取代了我的pointer-events，我甚至没有问过这个问题 :) - Simon Staton

这听起来很完美，我会尝试一下并在稍后或周一给出回复！感谢您的帮助！ - Ka.I.Z

Answer 2

正如我在评论中提到的，另一种方法是将发光类添加到活动的 div 中：

<div id="hauptteil">
   <div id="block" onclick="step2();" class="glow">
</div>              

#block {
   width: 50px;
   height: 50px;
   background: red;
}
.glow {
   cursor:pointer;
   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

- Brian Flanagan

Answer 3

您可以使用pointer-events: none;来忽略元素可能的点击事件。但是，正如评论中所述，您正在使用的方法似乎不是最佳选择。

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}

pointer-events 属性允许控制 HTML 元素如何响应鼠标/触摸事件，包括 CSS hover/active 状态、Javascript 中的 click/tap 事件以及光标是否可见。

将此属性放置在覆盖元素上将使其对点击事件透明。

然而，这在 IE 中不起作用

这是我的建议，我很好奇是否还有其他选项。我在我的网站上使用相同的方法，并使用条件标签忽略 IE 上的覆盖。

- Simon Staton

---

谢谢这个提示！但是如果在IE上也能发光就更好了。但目前这样也可以。谢谢！ - Ka.I.Z

Answer 4

这里有一个简单的代码片段 http://codepen.io/ElmahdiMahmoud/pen/Ewlto 希望能对你有所帮助！

- Mahmoud