Question

我有两个div元素，box_1和box_2：

<div id="box_1" style="position:absolute;top:0;left:0;width:500px;height:500px;border:1px solid gray;z-index:2;">
</div>

<div id="box_2" onclick="alert(1);" style="position:absolute;top:0;left:0;width:300px;height:300px;background-color:red;z-index:1;">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>

检查＆gt;＆gt;＆gt; demo

如何激活box_2？（不要内＃box_1，z-index小于box_1）

单击box_2

时，

激活==显示警报（1）谢谢你：）

Answer 1

我不完全理解你的问题。你设置这些方框的方式，让<div>可点击的唯一方法是给它一个大于2的“z-index”值。

或者，您可以为其他 <div>提供小于1的“z-index”值，或隐藏它。

如果您无法更改标记，那么您唯一能做的就是在顶部<div>捕获事件并将其转发到被掩盖的<div>。使用jQuery非常简单 - 只需将处理程序添加到顶部<div>并使用“.trigger”转发事件。

编辑 - 就像这样：

$('#box_1').click(function() {
  $('#box_2').trigger('click');
  return false;
});

现在，这将抓住来自顶部<div>的所有事件。在触发事件之前，您可以检查事件鼠标坐标以查看它们是否在底部<div>内。

Answer 2

你做了正确的事情，除了box_1是透明的，所以box_2正在显示。如果你给box_1一个像蓝色的背景颜色，你会看到它出现在顶部。

<div style=";width:500px;height:500px;border:1px solid gray;z-index:2;background:blue;" id="box_1">
</div>

<div style="width:300px;height:300px;background-color:red;z-index:1;" id="box_2" onclick="alert(1);">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>

如何激活背景div元素？

2 个答案: