Mouse Click Triggering Event of Element below Form being clicked

Question

I have a submit button (form) hovering over an image thumbnail which allows the user to delete the image as seen below

The thumbnail (img element) also has an onclick event which triggers a popup displaying the image in full size. Unfortunately, when I click the 'x' button (submit the form), the onclick event for the thumbnail image below also gets triggered so that the user is shown a popup before the page is redirected. How can I prevent this?

Additional Info

The css for the button is as so:

.delete_image_button
{
    position:               absolute;
    top:                    0px;
    right:                  0px;
    z-index:                1;
}

Answer 1

您可以使用jQuery 停止传播功能，它可以防止事件冒泡

Answer 2

You can use stopPropagation method for prevent the event from propagating to parent node.

$(element).click(function(event){
     event.stopPropagation();
});