CODEWITHSUNDEEP
jquerybuttononclickpreventdefault
bagofmilk
bagofmilk

Reputation: 1550

Prevent Default Click button inside anchor

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

enter image description here

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":

enter image description here

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);
});

Upvotes: 6

Views: 7884

Answers (3)

Raam Meena
Raam Meena

Reputation: 29

For Preventing any default event just user

e.preventDefault();

where, e stand for event.

Upvotes: 0

Adrian Lynch
Adrian Lynch

Reputation: 8494

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();
});

Upvotes: 5

feeela
feeela

Reputation: 29932

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

Upvotes: 4

Related Questions