{"id":9189,"date":"2022-09-17T16:20:50","date_gmt":"2022-09-17T10:50:50","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/"},"modified":"2022-09-17T16:20:50","modified_gmt":"2022-09-17T10:50:50","slug":"solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/","title":{"rendered":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You can pass the click event to the callback function. Then you can check for the event.target<\/code> element and react to it, returning false to do nothing or proceeding with your code.<\/p>\n

For the sake of this demonstration, I simply check if there is a click handler set on the element, but as you will probably have click handlers on the child elements later as well, you might want to check for event.target.tagName<\/code>, event.target.id<\/code> a specific class name, or any other distinctive feature.<\/p>\n

As suggested in the comments, another possibility is to register a listener on the child elements and then call event.stopPropagation()<\/code>, but using this approach, one listener is sufficient.<\/p>\n<\/p>\n

\n
\n
function clickHere(event) {\r\n  var target = event.target;\r\n  if (!event.target.onclick) return false;\r\n  \r\n  if (document.getElementById(\"drop\").style.display == \"block\") {\r\n    document.getElementById(\"drop\").style.display = \"none\";\r\n  } else {\r\n    document.getElementById(\"drop\").style.display = \"block\";\r\n  }\r\n}<\/code><\/pre>\n
<div style=\"background:red; height:500px;\">\r\n  <div onclick=\"clickHere(event)\" style=\"margin:auto;height: 40px; width:30%; background:green; position:relative;\">\r\n    <div id=\"drop\" style=\"display:none;width:100%; height:200px; background:blue; position:absolute; top: 100%; margin:0;\">\r\n      <h3 style=\"text-align: center; color:white;\">Hello<\/h3>\r\n      <h3 style=\"text-align: center; color:white;\">Hello<\/h3>\r\n      <h3 style=\"text-align: center; color:white;\">Hello<\/h3>\r\n      <h3 style=\"text-align: center; color:white;\">Hello<\/h3>\r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved My div with absolute position is affected by a clic of its parent [duplicate] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You can pass the click event to the callback function. Then you can check for the event.target element and react to it, returning false to do nothing or proceeding with your code. For the sake of this demonstration, I simply check if there is a click handler set on the element, but as you … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333],"class_list":["post-9189","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript"],"yoast_head":"\n[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can pass the click event to the callback function. Then you can check for the event.target element and react to it, returning false to do nothing or proceeding with your code. For the sake of this demonstration, I simply check if there is a click handler set on the element, but as you ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-17T10:50:50+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] My div with absolute position is affected by a clic of its parent [duplicate]\",\"datePublished\":\"2022-09-17T10:50:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\"},\"wordCount\":139,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\",\"name\":\"[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-17T10:50:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] My div with absolute position is affected by a clic of its parent [duplicate]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb","og_description":"[ad_1] You can pass the click event to the callback function. Then you can check for the event.target element and react to it, returning false to do nothing or proceeding with your code. For the sake of this demonstration, I simply check if there is a click handler set on the element, but as you ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/","og_site_name":"JassWeb","article_published_time":"2022-09-17T10:50:50+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate]","datePublished":"2022-09-17T10:50:50+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/"},"wordCount":139,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/","url":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/","name":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-17T10:50:50+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-my-div-with-absolute-position-is-affected-by-a-clic-of-its-parent-duplicate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] My div with absolute position is affected by a clic of its parent [duplicate]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9189"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9189\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}