Javascript prevent event propagation through element

Question

Working with google maps which has infowindows that popup. These infowindows have images which are click-able. As a result I need to be able to propagate events in the infowindow. However I am also able to click THROUGH the infowindow to other markers which causes the current infowindow to close and it to open a new infowindow.

I dont think this issue is specific to google maps. Is there a way to stop events from propagating through an element?

Thought the below code would help but it didnt.

$(document).on('touchstart', '.infoWindow', function(e){
  if ($(e.currentTarget) == $(this)) e.stopPropagation();
 });

Sounds like .stopImmediatePropagation() could be worth a shot — loveNoHate
– loveNoHate, Commented Oct 2, 2014 at 16:19
Please explain what the ($e.currentTarget) == $(this) check is supposed to do (Btw, it never works, as $e is not defined, and even if it was $(e.currentTarget) == $(this) then it always creates two different jQuery objects) — Bergi
– Bergi, Commented Oct 2, 2014 at 16:20
"How is $e not defined?" There is no var $e in your code and $e is not a function parameter either. I guess what you really want is e.currentTarget === this. — Felix Kling
– Felix Kling, Commented Oct 2, 2014 at 16:27
Sorry it should be e.currentTarget not $e.. had to go into dev tools to discover this. — user3032973
– user3032973, Commented Oct 2, 2014 at 16:32

Bergi · Accepted Answer · 2014-10-02 17:00:29Z

2

if ($(e.currentTarget) == $(this))

This is never true. It creates two distinct jQuery instances, which - even if they contain the same element - are not the same object. You might have wanted to do

if (e.currentTarget == this)

but this is always true - by definition of the event dispatch algorithm, the this value of an event listener and the currentTarget of the event object always refer to the same thing. Hell, even jQuery does this.

So you should just write

$(document).on('touchstart', '.infoWindow', function(e){
    e.stopPropagation();
});

to prevent touchstart events from bubbling through your infoWindows.

answered Oct 2, 2014 at 17:00

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zenorbi · Accepted Answer · 2014-10-02 17:04:20Z

You cannot stop the event propagation when you use event delegation. Event delegation relies on the bubbleing event, so by the time the delegated handler gets the event, the event already bubbled through every other element. You need to attach your event listener directly to the element.

$('.infoWindow').on('touchstart', function(e){
    e.stopPropagation();
});

Event delegation works by adding the event listener to the document, then every time the document receives that touchstart event, jQuery checks the source element and all of its parent if they match the given selector. If one matches, the handler gets invoked. This is why you don't need to add the listener every time you add a new element that would match the given selector.

Ohgyun Ahn · Accepted Answer · 2014-10-02 17:28:26Z

0

Setting a background color of the .infoWindow element might be a solution. If it should be transparent, you can use as follows:

background-color: rgba(255, 0, 0, 0);

answered Oct 2, 2014 at 17:28

Ohgyun Ahn

7871 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript prevent event propagation through element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related