Separating DOM elements for click events

Question

I have a website which displays search results. The results are displayed with headline information of the full item. The html of each search result looks like this:

<article class="search_result" onclick="location.href='#';" style="cursor: pointer;">

// Search result data

</article>

As you can see, I have made it so that you can click anywhere and access the result in more detail

However, within the search result, I have also included a button which performs another function.

The problem I have is when you click on the button, both the button and the search result receive the click event and act upon it. If the button is clicked, I dont want the search result to handle it as well.

How can I sort this?

possible duplicate of [What is event bubbling and capturing](http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — Diodeus - James MacFarlane, Sep 12 '13 at 20:55
You would stop the event from propagating up the DOM. See the link Diodeus posted, in addition to the documentation for `event.stopPropagation`. — Asad Saeeduddin, Sep 12 '13 at 20:57

score 2 · Answer 1 · edited May 23 '17 at 11:56

JavaScript events bubble up the DOM by default, so events triggered on a children will be triggered on the parent.

To prevent this, you need to stop the propagation of the event.

This is done by:

event.stopPropagation();

Note that event is usually passed as a parameter to your callback functions. (Meaning, don't use onclick="" attributes so you get function callback)

Full documentation: https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
(IE < 8 fallback: Prototype Event.StopPropagation for IE >= 8)

Separating DOM elements for click events

1 Answers1