{"id":242,"date":"2023-08-25T17:22:27","date_gmt":"2023-08-25T17:22:27","guid":{"rendered":"\/\/api.jquery.com\/?p=242"},"modified":"2024-04-20T18:06:57","modified_gmt":"2024-04-20T18:06:57","slug":"event.stopPropagation","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/event.stopPropagation\/","title":{"rendered":"event.stopPropagation()"},"content":{"rendered":"<article id=\"event-stopPropagation1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">event.stopPropagation()<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#undefined\">undefined<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"event-stopPropagation\" href=\"#event-stopPropagation\"><span class=\"icon-link\"><\/span>event.stopPropagation()<\/a>\n<\/h4>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <p>We can use <code><a href=\"\/event.isPropagationStopped\/\">event.isPropagationStopped()<\/a><\/code> to determine if this method was ever called (on that event object). <\/p>\n    <p>This method works for custom events triggered with <a href=\"\/trigger\/\">trigger()<\/a> as well.<\/p>\n    <p>Note that this will not prevent other handlers <em>on the same element<\/em> from running. <\/p>\n  <\/div>\n<h3>Additional Notes:<\/h3>\n<div class=\"longdesc\"><ul><li>\n\t\t\tSince the <a href=\"\/live\/\"><code>.live()<\/code><\/a> method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by <code><a href=\"\/delegate\/\">.delegate()<\/a><\/code> will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling <code><a href=\"\/event.stopPropagation\/\">event.stopPropagation()<\/a><\/code> or returning <code>false<\/code>.\n\t\t<\/li><\/ul><\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>Kill the bubbling on the click event.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"p\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  event.stopPropagation();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Do something<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,78],"tags":[],"class_list":["post-242","post","type-post","status-publish","format-standard","hentry","category-event-object","category-78"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":2,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":824,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/242\/revisions\/824"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}