{"id":3090,"date":"2022-01-24T10:18:24","date_gmt":"2022-01-24T04:48:24","guid":{"rendered":"https:\/\/explore.techenutia.com\/?p=3090"},"modified":"2022-01-24T10:18:24","modified_gmt":"2022-01-24T04:48:24","slug":"event-propagation-how-to-prevent-it","status":"publish","type":"post","link":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/","title":{"rendered":"Event propagation: How to prevent it?"},"content":{"rendered":"\n<p>Event Propagation is simply the ways by which order an event is captured by browser in an HTML page where elements are nested. There are basically two types of event propagation bubbling and capturing. In event bubbling the event of the innermost element is captured first while in event capturing the event of outermost element is captured first. The most famous example to understand this is an example of three boxes. <\/p>\n\n\n\n<p>Three boxes one inside the other all three have event handlers. Now you want to give an alert when clicked on each boxes. Now when you click on one of the boxes the alert will come from the inner most element first and then outer ones followed. But if you specify event propagation type to capturing then outermost will be called first and innermost at the later stage. Now here the problem is when you click on innermost box you want the event of innermost box to be called followed by no other event unless specifically specified. <\/p>\n\n\n\n<p>In order to achieve that you need to stop event propagation. There are certainly two ways to do so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>e.preventDefault()\ne.stopPropagation()<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopPropagation\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopPropagation\" target=\"_blank\" rel=\"noreferrer noopener\">e.stopPropagation <\/a>only stops the propagation of event but will still allow default behaviour if any such as links, etc. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/preventDefault\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/preventDefault\" target=\"_blank\" rel=\"noreferrer noopener\">e.preventDefault<\/a> will stop event propagation and default behaviour. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Event Propagation is simply the ways by which order an event is captured by browser in an HTML page where elements are nested. There are basically two types of event propagation bubbling and capturing. In event bubbling the event of the innermost element is captured first while in event capturing&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\">Read the post<span class=\"screen-reader-text\">Event propagation: How to prevent it?<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":3236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[205],"tags":[],"class_list":["post-3090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-moments","excerpt","zoom","full-without-featured","even","excerpt-0"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.12 (Yoast SEO v26.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Event propagation: How to prevent it? | ManOrInfinity<\/title>\n<meta name=\"description\" content=\"What is event propagation. what is event bubbling and capturing? How to prevent event bubbling? difference between e.stoppropagation and e.preventdefault\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Event propagation: How to prevent it?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\" \/>\n<meta property=\"og:site_name\" content=\"ManOrInfinity\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-24T04:48:24+00:00\" \/>\n<meta name=\"author\" content=\"manorinfinity\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:site\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"manorinfinity\" \/>\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:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\"},\"author\":{\"name\":\"manorinfinity\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"headline\":\"Event propagation: How to prevent it?\",\"datePublished\":\"2022-01-24T04:48:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\"},\"wordCount\":222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"CodeMoments\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\",\"url\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\",\"name\":\"Event propagation: How to prevent it? | ManOrInfinity\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-01-24T04:48:24+00:00\",\"description\":\"What is event propagation. what is event bubbling and capturing? How to prevent event bubbling? difference between e.stoppropagation and e.preventdefault\",\"breadcrumb\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/manorinfinity.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Event propagation: How to prevent it?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\",\"url\":\"https:\/\/manorinfinity.com\/blog\/\",\"name\":\"ManOrInfinity\",\"description\":\"Thrive towards greatness\",\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\",\"name\":\"manorinfinity\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"contentUrl\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"width\":282,\"height\":260,\"caption\":\"manorinfinity\"},\"logo\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being\",\"sameAs\":[\"http:\/\/manorinfinity.com\"],\"url\":\"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Event propagation: How to prevent it? | ManOrInfinity","description":"What is event propagation. what is event bubbling and capturing? How to prevent event bubbling? difference between e.stoppropagation and e.preventdefault","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:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/","og_locale":"en_US","og_type":"article","og_title":"Event propagation: How to prevent it?","og_url":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/","og_site_name":"ManOrInfinity","article_published_time":"2022-01-24T04:48:24+00:00","author":"manorinfinity","twitter_card":"summary_large_image","twitter_creator":"@manorinfinity","twitter_site":"@manorinfinity","twitter_misc":{"Written by":"manorinfinity","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#article","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/"},"author":{"name":"manorinfinity","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"headline":"Event propagation: How to prevent it?","datePublished":"2022-01-24T04:48:24+00:00","mainEntityOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/"},"wordCount":222,"commentCount":0,"publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage"},"thumbnailUrl":"","articleSection":["CodeMoments"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/","url":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/","name":"Event propagation: How to prevent it? | ManOrInfinity","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-01-24T04:48:24+00:00","description":"What is event propagation. what is event bubbling and capturing? How to prevent event bubbling? difference between e.stoppropagation and e.preventdefault","breadcrumb":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/manorinfinity.com\/blog\/2022\/01\/24\/event-propagation-how-to-prevent-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/manorinfinity.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Event propagation: How to prevent it?"}]},{"@type":"WebSite","@id":"https:\/\/manorinfinity.com\/blog\/#website","url":"https:\/\/manorinfinity.com\/blog\/","name":"ManOrInfinity","description":"Thrive towards greatness","publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901","name":"manorinfinity","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/","url":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","contentUrl":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","width":282,"height":260,"caption":"manorinfinity"},"logo":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/"},"description":"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being","sameAs":["http:\/\/manorinfinity.com"],"url":"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/comments?post=3090"}],"version-history":[{"count":0,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/media?parent=3090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/categories?post=3090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/tags?post=3090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}