question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using `return false` and/or `stopPropagation` on click events doesn't play nice with other libraries

See original GitHub issue

Any library that binds click events to the document could potentially have functionality broken because jquery-ujs stops event propagation from [data-remote] clicks.

For example, most tooltip libraries are supposed to hide a shown tooltip when you click anywhere outside of the tooltip target element, but if your click outside happens to be on a link with a data-remote attribute, that event gets killed and the tooltip doesn’t go away. Obviously this is a minor example, but it should help illustrate the conflict.

Since jquery-ujs is very high-level and abstract, I personally don’t see any compelling reasons (other than perhaps historical) for it to be stopping event propagation.

Admittedly, making this change would likely break functionality on existing sites, so perhaps it could be set with a config option, so projects that rely on this behavior can still have it.

If this is a direction the jquery-ujs project is willing to go, I’d be happy to submit a pull request with the changes.

Issue Analytics

  • State:open
  • Created 10 years ago
  • Reactions:1
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
scarfacedebcommented, Sep 10, 2014

I vote +1 for using just preventDefault instead of return false, because now I can’t trigger click handlers on the document.

My use case:

I’m opening popup and I want to close it when user clicks on any element outside of this popup.

$document.on( 'click.order', function(e){
      var $target = $(e.target);

  if ( e.target.id == 'order-close' || 
    !$target.closest('#order_container').length ){
    self.hide();
  }
});

It works well, except when I click on a link with [data-remote] attribute. I think that when a click event bubbles up to the document, it reaches handler for [data-remote] first, which in turn prevents it from going further into my handler.

For now, I use an ugly workaround like this:

$services.on( 'click', 'a[data-remote]', function(){
  Order.hide();
});

I don’t see any reason to include return false; instead of preventDefault in similar cases (e.g. css-tricks advises to use preventDefault), but I didn’t test it with old and obscure browsers like IE6-7.

0reactions
jonkesslercommented, Feb 20, 2015

@JangoSteve What’s the word on this? It’s been 5 months.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to correctly use preventDefault(), stopPropagation(), or ...
In vanilla JavaScript, returning false doesn't have any effect on the default behaviour or event propagation of the element, as we can see...
Read more >
The Dangers of Stopping Event Propagation - CSS-Tricks
Returning false from a jQuery event handler prevents the browser from navigating to the link address and it stops the event from propagating ......
Read more >
event.preventDefault() vs. return false - Stack Overflow
return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.
Read more >
Event.js-3 Source Code | Ext JS - Sencha Documentation
Element} wraps around a native DOM node, {@link Ext.event. ... use high resolution time stamps, while others use milliseconds) ... will not work....
Read more >
Event.stopPropagation() - Web APIs | MDN
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found