Prevent click() event from bubbling up the dom

Question

How could I re-write this to prevent the click() event from bubbling up the dom and triggering other functions?

wallcarousel.on('select.flickity', function() {
  $('.filter-category.is-selected a').click();
});

I tried adding e.stopPropagation(); like so:

wallcarousel.on('select.flickity', function() {
  $('.filter-category.is-selected a').click();
  e.stopPropagation(); //this did not work
});

I thought it referred to the click event. But I am heavily confused right now. — BrokenCode, Apr 02 '21 at 21:00
A quick look at errors thrown in dev tools console would tell you that `e` is undefined. Always check errors. They are far more informative than *"doesn't work"* — charlietfl, Apr 02 '21 at 21:12
In order to prevent `click()` from triggering other functions, you'd need to `stopPropagation()` of the `click` event. In your example, you're stopping propagation of the "select.flickity" event, in which case you'd need to pass the event to the handler like `function(e)` (see [what does (e) mean](https://stackoverflow.com/questions/10323392/in-javascript-jquery-what-does-e-mean)). I'm confused by `.click(e)`, as it seems to pass an undefined `e` variable as a click handler. — showdev, Apr 03 '21 at 05:32

score 2 · Answer 1 · answered Apr 03 '21 at 05:26

this should do the trick:

wallcarousel.on('select.flickity', function() {
  $('.filter-category.is-selected a').click(function(event) {
    event.stopPropagation();
  });
});

or ES6 version:

wallcarousel.on(
  'select.flickity',
  () => $('.filter-category.is-selected a')
    .click(event => event.stopPropagation());
);

1 Answers1