Conflicting events in javascript

Question

Here is my code:

<div class="MediaPreview" style="left: 10px; bottom: 10px;">
   <span>Image or video, required</span>
   <div class="x">x</div>
</div>

Now I have a hover over effect which displays the X. What I'm looking for now is to attach an onclick event to the div with a class of x so that when they click it handles the action. Currently it does this but when it finishes it performs the onclick event for the MediaPreview class subsequently

Not quite sure what to do hear. I'm looking for help/answers. A solution would be to isolate the onclick to the X text and then not have a subsequent event loaded

Answer 1

You need to use e.stopPropagation() to stop the event from bubbling up to the parent.

If you show us your actual code, we can show you where to plug in e.stopPropagation() in your click handler. Please remember that questions about code should always include the relevant code.