Question

是否可以检测到部分隐藏在div的所有区域中的绝对定位div（在其所有区域中）中的单击？在这种情况下，我想在用户点击div-1的隐藏部分时检测到点击。 THX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div-1').bind("click", function () { console.log('div 1 cliked');});
//$('#div-2').bind("click", function () { console.log('div 2 cliked');});
});
</script>
</head>
<body>
<div id="div-1" style="position:absolute; top:10px; left:500px; z-index:500; width:100px; height:100px; background-color:#9999FF; display:block;"></div>
<div id="div-2" style="position:absolute; top:10px; left:540px; z-index:500; width:100px; height:100px; background-color:#CC9999;"></div>
</body>
</html>

Answer 1

简单的解决方案 - 指针事件：FIDDLE

在顶部元素上设置pointer-events: none;将使其点击，而点击将在基础元素上注册。问题是这也将禁用顶部元素上的其他“指针事件”，并且它仅在现代浏览器中支持（读取：不是IE）。

否则你必须检查鼠标位置，看看它是否在第一个元素所覆盖的区域内，这样会更复杂但是SO上也有答案，尝试搜索功能！ / p>

Answer 2

不确定这是否适合您的使用案例，但在点击div-2时可能会触发div-1点击

  $('#div-2').click( function(){
     $('#div-1').click();
 });

检测单击具有较低z-index且部分覆盖的绝对定位div？

2 个答案: