重叠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的位置以覆盖红色块。所以似乎红色块正在发光。

Answer 1

早在2013年，您必须使用脚本来解决此问题，但现在pointer-events为widely supported。使用它！

---

通常您只需使用pointer-events css属性。你猜怎么着？ IE不支持它......在我们的朋友jquery的帮助下，我们可以效仿它！

我的方法是捕捉辉光中的click事件（绝对定位的div）并检查是否有任何其他元素与鼠标点击的x-y坐标重叠。

警告：jQuery提前！

首先捕获点击事件：

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

然后确定鼠标光标的坐标。非常简单，因为jQuery通过在事件对象中提供坐标来帮助我们

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

现在我们需要遍历所有可能的dom元素，这些元素位于我们想要接收click事件的glow div下面。

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

如果我们可以获得相对于窗口和的位置，它的宽度和高度，我们可以计算我们的光标在点击时是否在它上面。在这种情况下，我们的cursorX和cursorY值将位于我们遍历的DOM元素的left-position和left-position + width（以及顶部和高度）之间。 jQuery有点帮助：

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

我们使用offset()代替position()，因为后者会返回相对于其父的位置。我们分别使用outerWidth()和outerHeight()代替width()和height()，因为前者还包括填充和边框。

现在检查x和y坐标是否在range-min和range-max之间。如果是，则触发此元素上的click事件。

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

你想要一些动作吗？查看 this fiddle ！

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);
}

Answer 3

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

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

pointer-events属性允许控制HTML元素如何响应鼠标/触摸事件 - 包括CSS悬停/活动状态，Javascript中的点击/点击事件，以及光标是否可见。

将它放在您的重叠元素上会使点击事件变得透明。

但是这在IE

中不起作用

如果其他人有其他选择，这是我的好意。我在我的网站上使用相同的东西，只是使用条件标签忽略IE上的叠加。

Answer 4

这是一个简单的图钉，你可以查看http://codepen.io/ElmahdiMahmoud/pen/Ewlto希望这可以帮助你！