Jak zapobiegać zdarzeniu kliknięcia w aktywnej klasie w ramach innego zdarzenia kliknięcia z jQuery

Question

Mam kilka przedmiotów, które otrzymały klasę .active, klikając je. Teraz nie potrzebuję żadnych zdarzeń związanych z kliknięciem w żadnej klasie .active. Mam wiele funkcji klikania, które tworzą element active. Tak więc, aby zapobiec klikaniu aktywnych klas, napisałem funkcję zapobiegania w innym miejscu i wywołuję je wewnątrz funkcji każdego kliknięcia. Ale to nie zadziałało.

$('body').on('click', '#one', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 
$('body').on('click', '#two', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 

function noClickOnActive() { 
    $('body').on('click', '.content.active', function(event) { 
     event.preventDefault() 
     event.stopPropagation(); 
    }); 
}; 

Jak to działa?

Fiddle work

Answer 1

skorzystać z poniższego kodu. z funkcją jquery hasClass() możesz sprawdzić, czy element ma klasę, czy nie. zwraca true/false.

DEMO

$('body').on('click', '#one', function() { 
    if($(this).hasClass('active')){ 
     return false; 
    } 
    $(this).addClass('active'); 
    alert('clicked'); 
}); 

Answer 2

koparki zdarzeń działają w kolejności ich zarejestrowania. Być może będziesz musiał ustawić to domyślne zdarzenie zapobiegawcze na klasie active u góry wszystkich pozostałych zdarzeń kliknięcia.

$('body').on('click', '.content.active', function(event) { 
    event.preventDefault() 
    event.stopPropagation(); 
}); 

//Other event handlers code must be below 

Else powiązać zdarzenie .content i sprawdzić klasę tam

$('body').on('click', '.content', function(event) { 
 
if($(this).hasClass("active")) { 
 
    event.preventDefault() 
 
    event.stopPropagation(); 
 
} else { 
 
    $(this).addClass("active"); 
 
} 
 
});

.content { 
 
display: inline-block; 
 
border: 1px solid yellow; 
 
margin-right: 10px; 
 
padding: 5px; 
 
} 
 
.content:hover { 
 
cursor: pointer; 
 
} 
 
.content.active { 
 
background: yellow; 
 
cursor: inherit; 
 
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<div class="content" id="one"> 
 
<p>Click Me</p> 
 
</div> 
 
<div class="content" id="two"> 
 
<p>Another Click Me</p> 
 
</div>

Answer 3

Jeśli kliknięcie jest kwestia, to znaczy, że ma pewne działania przywiązane do niego. Czy usunięcie działania z elementu rozwiązałoby problem? Podobnie jak przy kliknięciu, ustaw href łącza na "".

Lub po prostu umieść instrukcję if w swoich danych wejściowych i linkach. Jeśli nie masz dużo, nie powinno to być ciężkim zadaniem.