82908

stopPropagation without jQuery

Question:

I bind to a link (by using the .live() function of jQuery) click event and then manually add an onclick event handler with pure JS and HTML (like <a href="".... onclick="some action">). I want to prevent bubbling of the event to the live method but I don't know how.

Maybe e.stopPropagation() is helpful in this situation but the event handler added with onclick is written in pure JS and I can't call stopPropagation() from outside the jQuery element wrapper. return false in this situation does not work. I tried to substitute return false with $.Event('click').stopPropagation() but I think this is wrong as it did not work.

How to prevent bubling to live() method without jQuery wrapper?

Answer1:

With <a href="http://api.jquery.com/live/" rel="nofollow">.live</a>, you cannot stop propagation. This is because with .live, the event handler is bound to the root of the DOM tree. Hence the event must bubble upto the highest element before your handler can be called. Its one of the caveats on using .live.

Consider using <a href="http://api.jquery.com/delegate/" rel="nofollow">.delegate</a> (if you want the handler to persist) or use <a href="http://api.jquery.com/bind/" rel="nofollow">.bind</a> instead.

If you want the live handler to be disabled completly, use die:

$("#myHref").die("click", aClick); // this will remove any existing event handlers $("#myHref").click(yourhandler); // add your handler

<a href="http://jsfiddle.net/mrchief/VtJyg/1/" rel="nofollow">Demo 1: JsFiddle 1</a>

Or, add an inline handler (and cancel the event from there):

<a href=".." onclick="yourhandler">

<a href="http://jsfiddle.net/mrchief/VtJyg/26/" rel="nofollow">Demo 2: JsFiddle 2</a>

Inline handlers will be called first always before any jquery event handlers.

Answer2:

I was under the assumption that return false in "normal" event handlers prevents the event from bubbling as well, <a href="https://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false" rel="nofollow">but I was wrong</a> (thanks <a href="https://stackoverflow.com/users/244353/mrchief" rel="nofollow">@Mrchief</a>).

There are other ways to stop it though, as described on <a href="http://www.quirksmode.org/js/events_order.html" rel="nofollow">quirksmode.org</a>:

function doSomething(e) { if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); }

cancelBubble is for IE, stopPropagation works in all W3C compatible browsers.

Recommend

  • Add click event on window, but ignore all links that start with https
  • Clockpicker: How to prevent click on input to open clockpicker
  • Onclick or href which is best for opening an link in button
  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • Tools for understanding HTML layout
  • ZipList with Scalaz
  • Where these are stored?
  • abstracting over a collection
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • CSS bleed-through with cfinput type=“datefield”
  • how do i write assembly code from c#?
  • Implicit joins and Where in Doctrine - how?
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Adding elements to a huge XML file
  • Insert new calendar with SyncAdapter- Calendar API Android
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Ensure fsync did its job
  • How to define and use opencv mat of user type
  • Cassandra Data Model
  • Trying to switch camera back to front but getting exception
  • Weird JavaScript statement, what does it mean?
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • Getting Messege Twice Using IMvxMessenger
  • Change div Background jquery
  • How does Linux kernel interrupt the application?
  • Is there any way to bind data to data.frame by some index?
  • Django query for large number of relationships
  • Programmatically clearing map cache
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?
  • Python/Django TangoWithDjango Models and Databases
  • Why do underscore prefixed variables exist?
  • How to push additional view controllers onto NavigationController but keep the TabBar?