Prevent Default Click button inside anchor

Question

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

score 5 · Answer 1 · edited Feb 04 '20 at 07:35

5

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

edited Feb 04 '20 at 07:35

Heemanshu Bhalla

3,603
1
27
53

answered Jun 20 '14 at 13:55

Adrian Lynch

8,237
2
32
40

1

Thats actually opposite of what I'm trying to achieve. I'm trying to make it so that only ".delete_image_btn" will fire an event. What you have prevents ".delete_image_btn" from firing. But thank you this gives me an idea – bagofmilk Jun 20 '14 at 13:57

score 4 · Answer 2 · answered Jun 20 '14 at 13:59

4

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

answered Jun 20 '14 at 13:59

feeela

29,399
7
59
71

I think I need to revise my post. My question is that I only want ".delete_image_btn" to fire an event. The problem is that when I click the trash-can, the "delete_image_btn" fires the event but then is immediately followed by FancyBox firing. I want to prevent FancyBox from firing. – bagofmilk Jun 20 '14 at 14:02
@bagofmilk Yes I understood it like that and `stopPropagation` should work in that case. I've updated my description a bit… – feeela Jun 20 '14 at 14:02
When I use this code only FancyBox fires an event. I'm sorry I'm still confused. – bagofmilk Jun 20 '14 at 14:04
@bagofmilk We can't help you any further without playing around with the code; a JSfiddle would be helpful. – feeela Jun 20 '14 at 14:05
Nevermind. I'm wrong. FancyBox was prevented but now it goes directly to the href link. – bagofmilk Jun 20 '14 at 14:05
I added a jsFiddle. I'm trying to prevent the BIG picture from firing. (it will fire after the two alerts). – bagofmilk Jun 20 '14 at 14:15
1

@bagofmilk Mmmh, I don't understand why, but `preventDefault` actually works: http://jsfiddle.net/feeela/CWaHL/242/ – feeela Jun 20 '14 at 14:23
Whats weird is that it works in the jsFiddle and when I copy/paste the code to my project - only fancybox fires ... it doesn't even see the alert. I'll have to sort this out. But thank you – bagofmilk Jun 20 '14 at 14:28

score 0 · Answer 3 · edited Feb 04 '20 at 08:28

0

For Preventing any default event just user

e.preventDefault();

where, e stand for event.

edited Feb 04 '20 at 08:28

aminography

21,986
13
70
74

answered Feb 04 '20 at 07:43

Raam Meena

29
9

Prevent Default Click button inside anchor

3 Answers3