{"id":396,"date":"2017-03-15T10:10:47","date_gmt":"2017-03-15T10:10:47","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=396"},"modified":"2017-03-29T17:43:23","modified_gmt":"2017-03-29T12:13:23","slug":"click-through-div-to-underlying-elements","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/click-through-div-to-underlying-elements\/","title":{"rendered":"[Solved &#8211; 10 Answers] Click through a DIV to underlying elements"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>we have a div that has background:transparent, along with border. Under this div, we have more elements.<\/li>\n<li>Currently, we able to click the underlying elements when we click outside of the overlay div. then<\/li>\n<li>It was unable to click the underlying elements when we directly click on overlay div<\/li>\n<li>.we need to click through this div tag Then only we can able to click on the underlying elements.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Using pointer-events: none along with CSS conditional statement for IE11.<\/li>\n<li>Using AlphaImageLoader, you can even set transparent .PNG\/.GIFs in the overlay div and clicks through a DIV elements below.<\/li>\n<\/ul>\n<ul>\n<li><strong>CSS:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">pointer-events: none;<br\/>background: url(&#039;your_transparent.png&#039;);<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li><strong>IE11 conditional:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#039;your_transparent.png&#039;, sizingMethod=&#039;scale&#039;);<br\/>background: none !important;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Here we can use elementFromPoint method.<\/li>\n<li>Attach a click to the div you want to be clicked through<\/li>\n<li>Hide it<\/li>\n<li>Determine what element the pointer is on<\/li>\n<li>Fire the click on the element there.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">var range-selector= $(&quot;&quot;)<br\/>    .css(&quot;position&quot;, &quot;absolute&quot;).addClass(&quot;range-selector&quot;)<br\/>    .appendTo(&quot;&quot;)<br\/>    .click(function(e) <br\/>{<br\/>        _range-selector.hide();<br\/> $(document.elementFromPoint(e.clientX,e.clientY)).trigger(&quot;click&quot;);<br\/>}<br\/>);<\/code><\/pre> <\/div>\n<ul>\n<li>This works on IE8\/9, Safari Chrome and Firefox.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Hide overlaying the element<\/li>\n<li>Determine cursor coordinates<\/li>\n<li>Get element on those coordinates<\/li>\n<li>Trigger click on element<\/li>\n<li>Show overlaying element again<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#elementontop).click(function (e) <br\/>{<br\/>        $(&#039;#elementontop).hide();<br\/>        $(document.elementFromPoint(e.clientX, e.clientY)).trigger(&quot;click&quot;);<br\/>        $(&#039;#elementontop&#039;).show();<br\/>}); <\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>Using jQuery-click through a div to underlying elements:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;.overlay&#039;).click(function(e)<br\/>{<br\/>    var left = $(window).scrollLeft();<br\/>    var top = $(window).scrollTop();<br\/><br\/>    \/\/hide the overlay for now so the document can find the underlying elements<br\/>    $(this).css(&#039;display&#039;,&#039;none&#039;);<br\/>    \/\/use the current scroll position to deduct from the click position<br\/>    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();<br\/>    \/\/show the overlay again<br\/>    $(this).css(&#039;display&#039;,&#039;block&#039;);<br\/>});<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Absolute positioning for underlying elements:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">java code<\/span> <\/div> <pre class=\"language-java code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-java code-embed-code\">#overlay <br\/>{<br\/>  position: absolute;<br\/>  top: -79px;<br\/>  left: -60px;<br\/>  height: 80px;<br\/>  width: 380px;<br\/>  z-index: 2;<br\/>  background: url(fake.gif);<br\/>}<br\/><br\/>&lt;div id=&quot;overlay&quot;&gt;&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>By adding pointer-events: none; to the absolute block.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body <br\/>{<br\/>  margin: 0;<br\/>  padding-left: 10px;<br\/>  font: 20px Arial, sans-serif;<br\/>  line-height: 30px;<br\/>}<br\/>a:hover <br\/>{  color: blue;<br\/>}<br\/>#overlay-blocking,<br\/>#overlay-passing<br\/>{<br\/>  position: absolute;<br\/>  height: 40px;<br\/>  width: 10em;left: 0;<br\/>}<br\/>#overlay-blocking <br\/>{<br\/>  top: 30px;<br\/>  background: rgba(0,100,0, .2);    <br\/>  pointer-events: none;<br\/>}<br\/>#overlay-passing <br\/>{ <br\/>top: 0;<br\/>  background: rgba(100,0,0, .2);    <br\/>}<br\/>&lt;a href=&quot;#&quot;&gt;Link blocked&lt;\/a&gt;&lt;br&gt;<br\/>&lt;a href=&quot;#&quot; title=&quot;hoverable&quot;&gt;Link available&lt;\/a&gt;&lt;br&gt;<br\/>&lt;a href=&quot;#&quot; title=&quot;hoverable&quot;&gt;Link available&lt;\/a&gt;&lt;br&gt;    <br\/>&lt;div id=&quot;overlay-blocking&quot;&gt;&lt;\/div&gt;<br\/>&lt;div id=&quot;overlay-passing&quot;&gt;&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Using Tags to click through a div to underlying elements:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;a href=&quot;\/categories\/1&quot;&gt;<br\/>    &lt;img alt=&quot;test1&quot; class=&quot;img-responsive&quot; src=&quot;\/assets\/photo.jpg&quot; \/&gt;<br\/>        &lt;div class=&quot;caption bg-orange&quot;&gt;<br\/>            &lt;h2&gt;<br\/>                test1<br\/>            &lt;\/h2&gt;<br\/>        &lt;\/div&gt;<br\/>&lt;\/a&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Using array to underlying elements<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">var clickarray=[];<br\/>function getcoo(thatdiv)<br\/>{<br\/>         thatdiv.find(&quot;.link&quot;).each(function()<br\/>{<br\/>          var offset=$(this).offset();           <br\/>          clickarray.unshift([(offset.left),<br\/>          (offset.top),<br\/>          (offset.left+$(this).width()),<br\/>           (offset.top+$(this).height()),<br\/>           ($(this).attr(&#039;name&#039;)),<br\/>          1]);<br\/>});<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li><strong>Using array<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&quot;body&quot;).click(function(event)<br\/>{<br\/>          event.preventDefault();\/\/if it is a a-tag<br\/>          var x=event.pageX;<br\/>          var y=event.pageY;<br\/>          var job=&quot;&quot;;<br\/>          for(var i in clickarray)<br\/>{<br\/>              if(x&gt;=clickarray[i][0] &amp;&amp; x&lt;=clickarray[i][2] &amp;&amp; y&gt;=clickarray[i][1] &amp;&amp; y&lt;=clickarray[i][3] &amp;&amp; clickarray[i][5]==1)<br\/>{<br\/>                 job=clickarray[i][4];<br\/>                 clickarray[i][5]=0;\/\/set to allready clicked<br\/>                 break;<br\/>}<br\/>}<br\/>          if(job.length&gt;0)<br\/>{   <br\/>             \/\/ --do some thing with the job --<br\/>}<br\/>});<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>pseudo html code to click through a div<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;listContainer&quot;&gt;<br\/>    &lt;div class=&quot;listRow&quot; id=&quot;listRow1&quot;&gt;<br\/>        &lt;div class=&quot;listItemName&quot;&gt;List item #1&lt;\/div&gt;<br\/>        &lt;div class=&quot;listItemIcon&quot;&gt;&lt;img src=&quot;images\/icon.png&quot;&gt;&lt;\/div&gt;<br\/>    &lt;\/div&gt;<br\/>    &lt;div class=&quot;listRow&quot; id=&quot;listRow2&quot;&gt;<br\/>        &lt;div class=&quot;listItemName&quot;&gt;List item #2&lt;\/div&gt;<br\/>        &lt;div class=&quot;listItemIcon&quot;&gt;&lt;img src=&quot;images\/icon.png&quot;&gt;&lt;\/div&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li><strong>jQuery code:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&quot;div.listRow&quot;).click(function()<br\/>{<br\/>    $(this).toggleClass(&quot;selected&quot;);<br\/>}<br\/>)<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>Using a combination of the applying a :hover selector on parent div and the pointer-events: none directive on the child div.<\/li>\n<\/ul>\n<ul>\n<li><strong>HTML:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;container&quot;&gt;<br\/>&lt;div class=&quot;clickthrough&quot;&gt;Mouseover&lt;\/div&gt;<br\/> &lt;button onClick=&quot;alert(&#039;click!&#039;);&quot;&gt;Click me&lt;\/button&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<ul>\n<li><strong>CSS:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.container <br\/>{<br\/>    position: relative;<br\/>}<br\/>.clickthrough <br\/>{<br\/>    position: absolute;<br\/>}<br\/>.container:hover .clickthrough <br\/>{<br\/>    opacity: 0.25;<br\/>    pointer-events: none;<br\/>}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM we have a div that has background:transparent, along with border. Under this div, we have more elements. Currently, we able to click the underlying elements when we click outside of the overlay div. then It was unable to click the underlying elements when we directly click on overlay div .we need to click through [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[801,808,795,802,790,806,796,803,788,798,791,811,793,799,789,809,800,797,807,805,810,794,792,804],"class_list":["post-396","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-but-underneath-clickable","tag-can-i-use-pointer-events","tag-click-through-a-div-to-underlying-elements","tag-click-through-div","tag-click-through-elements-pointer-events-none","tag-click-through-transparent-png","tag-clicking-through-a-div-to-underlying-elements","tag-creating-a-click-through-div","tag-css-click-through-a-div-to-underlying-elements","tag-css-pointer-events-property-alternative-for-ie","tag-css-pointer-events-to-allow-clicks-on-underlying-elements","tag-forwarding-mouse-events-through-layers","tag-htmlcss-make-clickable-through-transparent-div-layer","tag-image-overlay-you-can-click-through","tag-javascript-how-to-disable-clicking-inside-div","tag-javascript-prevent-click-through","tag-make-element-appear-on-top","tag-passing-click-events-through-a-blocking-element","tag-pointer-events-none","tag-pointer-events-click-only","tag-pointer-events-ie10","tag-pointer-eventsnone-or-click-through-div","tag-prevent-click-event-on-certain-child-element-using-jquery","tag-prevent-click-through-div"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}