Why does tapping on a child div acts as if the parent div was clicked?

Hi,
Please see this sample demo: https://fiddle.jshell.net/17zmr16s/3/
Can someone explain to a newbie, why does the tapping on the “popup” panel gets propagated to the mask parent? How can this be prevented?

I thought that giving the popup a higher z-index value will solve it, but it doesn’t.

Clicking on the X, does two things: it triggers the alert (as expected), but also propagates to the mask and it disappears…

I also tried using: https://github.com/josdejong/propagating-hammerjs, but that didn’t solve the problem.

Any help would be greatly appreciated.

Any event on an element will bubble up the DOM, and trigger the same event on its parents as well. There’s an event method to prevent this behaviour, though:

event.stopPropagation();

PS: In jQuery you can also just return false from the handler function, which will both .preventDefault() and .stopPropagation().

1 Like

Thank you for the explanation.
This means that I need to catch the tapping event on the popup itself and stop it from propagating.

Thank you

For some reason, the code I have in https://fiddle.jshell.net/17zmr16s/4/ works,
but the code I have in my actual project does not work.

In my code, when I invoke: event.stopPropagation();
I get the following error: “Uncaught TypeError: event.stopPropagation is not a function”

I noticed that in the code that works, the event object is this:

Event {isTrusted: false, gesture: Object, type: “tap”, target: div, currentTarget: div.modal–panel…}
bubbles : true
cancelBubble : false
cancelable : true
composed : false
currentTarget : null
defaultPrevented : false
eventPhase : 0
gesture : Object
isTrusted : false
path : Array(7)
returnValue : true
srcElement : div
target : div
timeStamp : 1436.13
type : “tap”
proto : Event

While in the code that does not work, the event object is this:

Object {pointers: Array(1), changedPointers: Array(1), pointerType: “touch”, srcEvent: PointerEvent, isFirst: false…}
angle : 0
center : Object
changedPointers : Array(1)
deltaTime : 78
deltaX : 0
deltaY : 0
direction : 1
distance : 0
eventType : 4
isFinal : true
isFirst : false
maxPointers : 1
offsetDirection : 1
overallVelocity : 0
overallVelocityX : 0
overallVelocityY : 0
pointerType : “touch”
pointers : Array(1)
preventDefault : function ()
rotation : 0
scale : 1
srcEvent : PointerEvent
tapCount : 1
target : div#modal-foul-caption.modal-container.modal-container–caption
timeStamp : 1493626549760
type : “tap”
velocity : 0
velocityX : 0
velocityY : 0
proto : Object

The latter seems more like the HammerJS event object as specified in the HammerJS documentation: http://hammerjs.github.io/api/

Does anyone know what is going on?

Not without seeing the actual code that does not work… could you try to reproduce that in a fiddle?

Anyway I had a glimpse at the API, and it seems that the hammerjs event object holds a reference to the original Event object as .srcEvent… so maybe something like this would work:

event.srcEvent.stopPropagation()

Just a guess though, I haven’t tried it myself. At any rate, I’d still try to find out why you’re getting passed in different kinds of objects here…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.