重叠 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它已得到广泛支持。用它！

通常您只需使用pointer-eventscss 属性。你猜怎么了？IE 不支持它...不过，在我们的朋友 jquery 的帮助下，我们可以模拟它！

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

警告：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 + widthjQuery 再次提供了一些帮助：

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

你想要采取一些行动吗？看看这个小提琴！