<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>bubbling &#8211; stoimen&#039;s web log</title>
	<atom:link href="/tag/bubbling/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>on web development</description>
	<lastBuildDate>Tue, 13 Feb 2018 08:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>cancel bubbling on element click with jQuery</title>
		<link>/2009/07/29/cancel-bubbling-on-element-click-with-jquery/</link>
		<comments>/2009/07/29/cancel-bubbling-on-element-click-with-jquery/#respond</comments>
		<pubDate>Wed, 29 Jul 2009 14:09:53 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[micro tutorial]]></category>
		<category><![CDATA[bubbling]]></category>
		<category><![CDATA[click]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">/?p=713</guid>
		<description><![CDATA[When you click over an element This is easy, on the element can be attached event listener an such event listener is built in as the click event is. It&#8217;s simply like that: &#60;div click="func1()"&#62;&#60;/div&#62; This with jQuery A bit different with jQuery, but with the same effect is: $('div').click(func1); When there is a bubbling? &#8230; <a href="/2009/07/29/cancel-bubbling-on-element-click-with-jquery/" class="more-link">Continue reading <span class="screen-reader-text">cancel bubbling on element click with jQuery</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2009/06/17/mouseclick-outside-a-dom-element/" rel="bookmark" title="mouseclick outside a DOM element">mouseclick outside a DOM element </a></li>
<li><a href="/2009/10/22/event-driven-programming-with-jquery-part-3-what-is-a-module/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 3). What is a module?">Event driven programming with jQuery &#8211; (part 3). What is a module? </a></li>
<li><a href="/2009/07/08/jquery-check-for-element-visibility/" rel="bookmark" title="jQuery check for element visibility">jQuery check for element visibility </a></li>
<li><a href="/2009/12/30/jquery-live-vs-bind-performance/" rel="bookmark" title="jQuery live() vs bind() performance">jQuery live() vs bind() performance </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<h2>When you click over an element</h2>
<p>This is easy, on the element can be attached event listener an such event listener is built in as the click event is. It&#8217;s simply like that:</p>
<blockquote>
<pre>&lt;div click="func1()"&gt;&lt;/div&gt;</pre>
</blockquote>
<h2>This with jQuery</h2>
<p>A bit different with jQuery, but with the same effect is:</p>
<blockquote>
<pre>$('div').click(func1);</pre>
</blockquote>
<h2>When there is a bubbling?</h2>
<p>Well, if you just copy paste this code in your page:</p>
<blockquote>
<pre>$(document).click(<span>function</span>() <span>{ </span></pre>
<pre>    console.log(<span>'clicked on the document'</span>);</pre>
<pre><span>}</span>);
$(<span>'div'</span>).click(<span>function</span>() <span>{ </span></pre>
<pre>    console.log(<span>'clicked on the div'</span>);</pre>
<pre><span>}</span>);</pre>
</blockquote>
<p><a href="/wp-content/uploads/2009/07/cancel-bubbling1.png"><img class="alignnone size-full wp-image-714" title="cancel-bubbling1" src="/wp-content/uploads/2009/07/cancel-bubbling1.png" alt="" width="426" height="182" srcset="/wp-content/uploads/2009/07/cancel-bubbling1.png 426w, /wp-content/uploads/2009/07/cancel-bubbling1-300x128.png 300w" sizes="(max-width: 426px) 100vw, 426px" /></a></p>
<p><em><strong>Note:</strong> if you&#8217;re using Firefox keep the console.log function, in other case you may replace it with either alert or $.log from the recent jQuery </em><a title="jquery debug plugin" href="/2009/07/27/jquery-debug-plugin/" target="_self"><em>plugin</em></a><em> i wrote.</em></p>
<p>Now if you click over the div element you get both messages, cause there is no bubble canceling. If you&#8217;d like to add such canceling, just add this code to the click callback for the div element:</p>
<blockquote>
<pre>return false;</pre>
</blockquote>
<p>and now the code should look like:</p>
<blockquote>
<pre>$(document).click(<span>function</span>() <span>{ </span></pre>
<pre><span>    $.log(<span>'clicked on the document'</span>); </span></pre>
<pre><span><span>}</span>);</span></pre>
<pre>$(<span>'div'</span>).click(<span>function</span>() <span>{ </span></pre>
<pre>    $.log(<span>'clicked on the div'</span>); <span>return false</span>;</pre>
<pre><span>}</span>);</pre>
</blockquote>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2009/06/17/mouseclick-outside-a-dom-element/" rel="bookmark" title="mouseclick outside a DOM element">mouseclick outside a DOM element </a></li>
<li><a href="/2009/10/22/event-driven-programming-with-jquery-part-3-what-is-a-module/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 3). What is a module?">Event driven programming with jQuery &#8211; (part 3). What is a module? </a></li>
<li><a href="/2009/07/08/jquery-check-for-element-visibility/" rel="bookmark" title="jQuery check for element visibility">jQuery check for element visibility </a></li>
<li><a href="/2009/12/30/jquery-live-vs-bind-performance/" rel="bookmark" title="jQuery live() vs bind() performance">jQuery live() vs bind() performance </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2009/07/29/cancel-bubbling-on-element-click-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
