title: Prevent Default Click button inside anchor
body: <p>I am using FancyBox --> <a href="http://fancybox.net/howto" rel="noreferrer">jQuery Plugin</a> to display an image gallery. <br/></p>
  
  <p><img src="https://i.stack.imgur.com/xVaSY.jpg" alt="enter image description here"></p>
  
  <p>Here's a JSFIDDLE that I'm trying to play around with: --> <a href="http://jsfiddle.net/CWaHL/238/" rel="noreferrer">http://jsfiddle.net/CWaHL/238/</a></p>
  
  <p>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":</p>
  
  <p><img src="https://i.stack.imgur.com/4Uq7m.jpg" alt="enter image description here"></p>
  
  <p>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). </p>
  
  <p>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.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;a class="fancybox-thumbs" data-fancybox-group="thumb" href="[path to main image]"&gt; 
     &lt;button class="btn btn-danger btn-icon delete_image_btn"&gt;
          &lt;i class='fa fa-trash-o'&gt;&lt;/i&gt;
     &lt;/button&gt;
     &lt;img src="[path to thumbnail]" alt="" class='tip' data-placement='top' title='oldman, robot, dance'&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Some jQuery:</p>
  
  <pre><code>$('.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);
  });
  </code></pre>