Prevent Default Click button inside anchor

Question

I am using FancyBox --> jQuery Plugin to display an image gallery.

Here's a JSFIDDLE that I'm trying to play around with: --> http://jsfiddle.net/CWaHL/238/

I want the user to be able to delete an image so I created a button on top of the thumbnail image. The button will appear and opacity changes on "mouseover":

I can click the trash-can button and fire an event (alert). The problem is that FancyBox also fires immediately after the first event (because the button is inside its parent anchor).

If I want this to work properly, I need to only have the trash-can button fire an event and then prevent any event from FancyBox.

Here's my HTML:

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="[path to main image]"> 
   <button class="btn btn-danger btn-icon delete_image_btn">
        <i class='fa fa-trash-o'></i>
   </button>
   <img src="[path to thumbnail]" alt="" class='tip' data-placement='top' title='oldman, robot, dance'>
</a>

Some jQuery:

$('.fancybox-thumbs').on('mouseover',function() {
   $(this).children('img').css('opacity', '0.2');
   $(this).children('button').css('display','block').css('opacity','1');
});

$('.fancybox-thumbs').on('mouseout',function() {
   $(this).children('img').css('opacity', '1');
   $(this).children('button').css('display','none');
});


// My failed attempt to prevent default click
$('.delete_image_btn').click(function() {
   alert('sup');
   $(this).parent('.fancybox-thumbs').prop('onclick', null);
});

Answer 1

You need to stop the further propagation of the event down to the link element. What happens right now is that two different event handlers get fired, because when you click on that button, it is also an implicit click on the surrounding anchor. You now need to prevent that event bubbles up the DOM.

You can use event.stopPropagation() to do so:

$( '.delete_image_btn' ).click( function( event ) {
    event.stopPropagation();
    /* whatever comes next */
} );

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

Answer 2

e.stopPropagation(); - It will stop propagation of events but it will not stop occurence of fired event. so as per question e.preventDefault(); will help because it will stop the default action of fired event.

$('.delete_image_btn').click(function(e) {
   e.preventDefault();
});