Home/ Questions/Q 7617287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:06:38+00:00

Is is possible to detect a click in an absolute positioned div (in all

  • 0

Is is possible to detect a click in an absolute positioned div (in all its area) that is partially hidden in all the area of the div? In this case i would like to detect the click when user clicked in the hidden part of 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The simple solution – pointer events: FIDDLE

    Setting pointer-events: none; on the top element will make it click through, and the click will be registered on the underlying element instead. The problem is that this will also disable other “pointer events” on the top element, and it’s only supported in modern browsers (read: not IE).

    Otherwise you would have to check the mouse position and see if it is inside the area covered by the first element, and that will be somewhat more complicated but there are answers on SO for this as well, try the search function!

    • 0