重叠 DIV 元素和 onclick

Posted 2023-03-05

【中文标题】重叠 DIV 元素和 onclick

【英文标题】：Overlapping DIV Elements and onclick

【发布时间】：2013-09-03 05:06:54

【问题描述】：

我即将用 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 的位置以覆盖红色块。所以看起来红色块正在发光。

【问题讨论】：

与其尝试重叠元素，为什么不将额外的发光样式应用于活动 div？

可能重复***.com/questions/1009753/…

我认为突出特定区域会很容易。但也许你的建议是更好的主意。

【参考方案1】：

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

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

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

将其放置在您的覆盖元素上将使其对点击事件透明。

但是这在 IE 中不起作用

这是我的建议，我很好奇其他人是否有其他选择。我在我的网站上使用相同的东西，只是使用条件标签忽略了 IE 上的覆盖。

【讨论】：

感谢您的提示！但是，如果在 IE 上也能发光，那就太好了。但目前这没关系。谢谢！

【参考方案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);

【参考方案3】：

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

【参考方案4】：

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

---

通常您只需使用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 坐标是否在 range-min 和 range-max 之间。如果是，则触发该元素的点击事件。

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

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

【讨论】：

太棒了，这正在取代我的指针事件，我什至没有问这个问题:)

这听起来很完美，我会试试这个，并会在稍后或星期一给出回复！感谢您的帮助！