简体   繁体   中英

Prevent JS Action from Happening When Button is Clicked

I am using Isotopes on a page. When you click a item the item adds a class and expands size. You can see an example of what I mean on the Isotopes demo page . (Click and element to see.)

I have content that shows when in a large view. Inside the large view I have a button that allows a person to review the item which then opens a lightbox. The problem is when the button is clicked the element goes back to the small state. How do I prevent this from happening if the button is clicked?

In other words if the item is clicked go back to smaller state. If the review button is clicked then stay large.

HTML

<div class="element indica" data-category="indica">
  <p class="type">I</p>
  <h2 class="name">Name</h2>
  <p class="strain-info">Information Here</p>
<!-- WHEN BUTTON BELOW IS CLICK DO NOT RESIZE ELEMENT -->
  <p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p>
</div>

JS

var $j = jQuery.noConflict();

$j(function(){

var $jcontainer = $j('#container');

//Isotope Code

//JS controling only the resizing of an element
  $jcontainer.delegate( '.element', 'click', function(){
    $j(this).toggleClass('large');
    $jcontainer.isotope('reLayout');
  });
});

EDIT

I tried the following code, per Aslam Khan's Answer, which did not work:

<p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox" onclick="javascript:void(0);"><span style="background-color: #000;">Review Strain</span></a></p>

I added onclick="javascript:void(0); to the <a> tag.

You can use e.stopPropagation(); in javascript function .

If you wanna block it from the html use onclick="javascript:void(0);"

While I know there has to be a better way I added the following code and it seems to work:

Note: I am using Colorbox Lightbox and jQuery.noConflict(); thus the $j

$j(".review-form-lb").colorbox({onOpen:function(){
   var clickeddiv = $j(this).closest('div');
   $j(clickeddiv).addClass("large");
   $jcontainer.isotope('reLayout');
}});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM