Home Ask Login Register

Developers Planet

Your answer is one click away!

Mark February 2016

stopPropagation not preventing bubbling with Bootstrap popover

I am attempting to prevent clicks on a React Bootstrap popover from bubbling up and triggering the onClick handler on a parent element. Using the standard event.stopPropagation() does not, in fact, stop propagation, nor does its native counterpart:

Please see the working reduced test case on JSBin.

My current approach (within the parent's onClick event) is to check if the target element is inside the popover's DOM tree (using jQuery.has for convenience):

function onParentClicked(e) {
    if (!$(this.refs.parentElement).has(e.target)) {
        // click did NOT originate from popover

This approach mostly works, but seems like a hacky workaround for simply using stopPropagation in the child's onClick handler.

Is this possibly a React Bootstrap bug? Or am I missing something in how I should be handling this logic?


frontsideair February 2016

You could try putting Popover outside the parent div?

Post Status

Asked in February 2016
Viewed 2,760 times
Voted 6
Answered 1 times


Leave an answer

Quote of the day: live life