{"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[pastacode lang=&#8221;css&#8221; manual=&#8221;pointer-events%3A%20none%3B%0Abackground%3A%20url(&#8216;your_transparent.png&#8217;)%3B%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li><strong>IE11 conditional:<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;filter%3Aprogid%3ADXImageTransform.Microsoft.AlphaImageLoader(src%3D&#8217;your_transparent.png&#8217;%2C%20sizingMethod%3D&#8217;scale&#8217;)%3B%0Abackground%3A%20none%20!important%3B%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;var%20range-selector%3D%20%24(%22%22)%0A%20%20%20%20.css(%22position%22%2C%20%22absolute%22).addClass(%22range-selector%22)%0A%20%20%20%20.appendTo(%22%22)%0A%20%20%20%20.click(function(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20_range-selector.hide()%3B%0A%20%24(document.elementFromPoint(e.clientX%2Ce.clientY)).trigger(%22click%22)%3B%0A%7D%0A)%3B%0A%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;%23elementontop).click(function%20(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(&#8216;%23elementontop).hide()%3B%0A%20%20%20%20%20%20%20%20%24(document.elementFromPoint(e.clientX%2C%20e.clientY)).trigger(%22click%22)%3B%0A%20%20%20%20%20%20%20%20%24(&#8216;%23elementontop&#8217;).show()%3B%0A%7D)%3B%20%0A%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;.overlay&#8217;).click(function(e)%0A%7B%0A%20%20%20%20var%20left%20%3D%20%24(window).scrollLeft()%3B%0A%20%20%20%20var%20top%20%3D%20%24(window).scrollTop()%3B%0A%0A%20%20%20%20%2F%2Fhide%20the%20overlay%20for%20now%20so%20the%20document%20can%20find%20the%20underlying%20elements%0A%20%20%20%20%24(this).css(&#8216;display&#8217;%2C&#8217;none&#8217;)%3B%0A%20%20%20%20%2F%2Fuse%20the%20current%20scroll%20position%20to%20deduct%20from%20the%20click%20position%0A%20%20%20%20%24(document.elementFromPoint(e.pageX-left%2C%20e.pageY-top)).click()%3B%0A%20%20%20%20%2F%2Fshow%20the%20overlay%20again%0A%20%20%20%20%24(this).css(&#8216;display&#8217;%2C&#8217;block&#8217;)%3B%0A%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Absolute positioning for underlying elements:<\/li>\n<\/ul>\n[pastacode lang=&#8221;java&#8221; manual=&#8221;%23overlay%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%20-79px%3B%0A%20%20left%3A%20-60px%3B%0A%20%20height%3A%2080px%3B%0A%20%20width%3A%20380px%3B%0A%20%20z-index%3A%202%3B%0A%20%20background%3A%20url(fake.gif)%3B%0A%7D%0A%0A%3Cdiv%20id%3D%22overlay%22%3E%3C%2Fdiv%3E%0A&#8221; message=&#8221;java code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;body%20%0A%7B%0A%20%20margin%3A%200%3B%0A%20%20padding-left%3A%2010px%3B%0A%20%20font%3A%2020px%20Arial%2C%20sans-serif%3B%0A%20%20line-height%3A%2030px%3B%0A%7D%0Aa%3Ahover%20%0A%7B%20%20color%3A%20blue%3B%0A%7D%0A%23overlay-blocking%2C%0A%23overlay-passing%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20height%3A%2040px%3B%0A%20%20width%3A%2010em%3Bleft%3A%200%3B%0A%7D%0A%23overlay-blocking%20%0A%7B%0A%20%20top%3A%2030px%3B%0A%20%20background%3A%20rgba(0%2C100%2C0%2C%20.2)%3B%20%20%20%20%0A%20%20pointer-events%3A%20none%3B%0A%7D%0A%23overlay-passing%20%0A%7B%20%0Atop%3A%200%3B%0A%20%20background%3A%20rgba(100%2C0%2C0%2C%20.2)%3B%20%20%20%20%0A%7D%0A%3Ca%20href%3D%22%23%22%3ELink%20blocked%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%20%20%20%20%0A%3Cdiv%20id%3D%22overlay-blocking%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22overlay-passing%22%3E%3C%2Fdiv%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;%3Ca%20href%3D%22%2Fcategories%2F1%22%3E%0A%20%20%20%20%3Cimg%20alt%3D%22test1%22%20class%3D%22img-responsive%22%20src%3D%22%2Fassets%2Fphoto.jpg%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22caption%20bg-orange%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test1%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fa%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Using array to underlying elements<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;var%20clickarray%3D%5B%5D%3B%0Afunction%20getcoo(thatdiv)%0A%7B%0A%20%20%20%20%20%20%20%20%20thatdiv.find(%22.link%22).each(function()%0A%7B%0A%20%20%20%20%20%20%20%20%20%20var%20offset%3D%24(this).offset()%3B%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20clickarray.unshift(%5B(offset.left)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.top)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.left%2B%24(this).width())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(offset.top%2B%24(this).height())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(%24(this).attr(&#8216;name&#8217;))%2C%0A%20%20%20%20%20%20%20%20%20%201%5D)%3B%0A%7D)%3B%0A%7D%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li><strong>Using array<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(%22body%22).click(function(event)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20event.preventDefault()%3B%2F%2Fif%20it%20is%20a%20a-tag%0A%20%20%20%20%20%20%20%20%20%20var%20x%3Devent.pageX%3B%0A%20%20%20%20%20%20%20%20%20%20var%20y%3Devent.pageY%3B%0A%20%20%20%20%20%20%20%20%20%20var%20job%3D%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20for(var%20i%20in%20clickarray)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(x%3E%3Dclickarray%5Bi%5D%5B0%5D%20%26%26%20x%3C%3Dclickarray%5Bi%5D%5B2%5D%20%26%26%20y%3E%3Dclickarray%5Bi%5D%5B1%5D%20%26%26%20y%3C%3Dclickarray%5Bi%5D%5B3%5D%20%26%26%20clickarray%5Bi%5D%5B5%5D%3D%3D1)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20job%3Dclickarray%5Bi%5D%5B4%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clickarray%5Bi%5D%5B5%5D%3D0%3B%2F%2Fset%20to%20allready%20clicked%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%7D%0A%7D%0A%20%20%20%20%20%20%20%20%20%20if(job.length%3E0)%0A%7B%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20&#8211;do%20some%20thing%20with%20the%20job%20&#8211;%0A%7D%0A%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Cdiv%20class%3D%22listContainer%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow1%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%231%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow2%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%232%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li><strong>jQuery code:<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(%22div.listRow%22).click(function()%0A%7B%0A%20%20%20%20%24(this).toggleClass(%22selected%22)%3B%0A%7D%0A)%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Cdiv%20class%3D%22container%22%3E%0A%3Cdiv%20class%3D%22clickthrough%22%3EMouseover%3C%2Fdiv%3E%0A%20%3Cbutton%20onClick%3D%22alert(&#8216;click!&#8217;)%3B%22%3EClick%20me%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li><strong>CSS:<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;.container%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A.clickthrough%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%7D%0A.container%3Ahover%20.clickthrough%20%0A%7B%0A%20%20%20%20opacity%3A%200.25%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%7D%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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}]}}