2013-07-23 2 views
0

Я использую изотопы на странице. Когда вы нажимаете на элемент, элемент добавляет класс и расширяет размер. Вы можете увидеть пример того, что я имею в виду на Isotopes demo page. (Щелкните и элемент для просмотра.)Предотвратите действие JS от случайности при нажатии кнопки

У меня есть контент, который показывает, когда на большом экране. Внутри большого вида у меня есть кнопка, которая позволяет человеку просмотреть элемент, который затем открывает лайтбокс. Проблема в том, что при нажатии кнопки элемент возвращается в небольшое состояние. Как предотвратить это, если нажать кнопку?

Другими словами, если элемент щелкнул, вернитесь в более низкое состояние. Если нажать кнопку обзора, оставайтесь на большом месте.

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

Я попытался следующий код, в ответ, Аслам Хана, который не работал:

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

Я добавил onclick="javascript:void(0); к <a> тега.

+0

возможно ли, что вы можете создать 'jsfiddle'? –

ответ

0

В то время как я знаю, что должен быть лучший способ я добавил следующий код, и это, кажется, работает:

Примечание: Я использую ColorBox Lightbox и jQuery.noConflict(); таким образом $j

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

Вы можете использовать e.stopPropagation(); в функции javascript.

Если вы хотите заблокировать его из HTML использования onclick="javascript:void(0);"

+0

См. Мое редактирование на мой вопрос. Это не сработало. – L84

+0

Также необходимо 'e.preventDefault(); return false; ' –

Смежные вопросы