Stoppen Sie eines der Click-Ereignisse auf der gleichen Schaltfläche

Question

Ich habe Button, mit zwei Klickereignissen. Was ich versuche zu tun ist, um beide oder alle Ereignisse auf dieser Schaltfläche abhängig von einem Kriterium zu verhindern.

Ich habe versucht, event.preventDefault(); und event.stopPropagation(); und return false; zu verwenden, aber nichts funktioniert, wie ich brauche.

/* I need to stop $('button') event if the if condition 
 
inside $('#btn') event passed */ 
 

 
$('#btn').click(function(e){ 
 
    var term = $('#term').val(); 
 

 
    if(term != '') { 
 
    //e.preventDefault(); 
 
    //e.stopPropagation(); 
 
    return false; 
 
    alert(2); 
 
    } else { 
 
    // continue 
 
    } 
 
}); 
 

 
$('button').click(function(e){ 
 
    alert(1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="term" type="text" placeholder="type here .."> 
 
<button type="button" id="btn">Check</button>

JSfiddle example

Answer 1

Ich nehme an, Sie beide Ereignisse beenden möchten. Wenn dies der Fall ist, sollten Sie eine Klausel zu Ihrem $ ('button') hinzufügen. . Zuerst wird in der $ ('# btn')() klicken Handler hinzufügen Eigenschaft zu überprüfen, ob Ereignis aufhören sollte:

if(term != '') { 
    //e.preventDefault(); 
    //e.stopPropagation(); 
    this.stop = 1; 
... 

Dann ist es überprüfen:

if (this.getAttribute("id") !== "btn" || this.stop !==1) { 
     alert(1); 
    } 

Hier JSFiddle

Answer 2

Um aus Ihrer Funktion Gebrauch zu brechen nur return; (statt return false;)

Sie können aber auch keinen Code nach einer return so eingestellt, hier gehen Sie :

$('#btn').click(function(e){ 
    e.preventDefault(); 

    var term = $.trim($('#term').val()); 

    if(term !== "") { 
    alert("Value exists! I'm breaking any further operations."); 
    return; // "Exit" my function 
    // YOU CANNOT WRITE CODE AFTER A RETURN STATEMENT! 
    } else { // Else is actually not needed but it's cool to have it for clearance 
    alert("Value is empty."); 
    } 
}); 

$('button').click(function(e){ 
    alert(1); // You'll see this in any case. 
}); 

---

Um auf Ihre Frage zu erweitern Wie die Warnung (1) verhindern, dass popping

$('#btn').click(function(e){ 
 
    e.preventDefault(); 
 

 
    this.term = $.trim($('#term').val()); 
 

 
    if(this.term) { 
 
    alert("Value exists!"); 
 
    } else { 
 
    alert("Value is empty."); 
 
    } 
 
}); 
 

 
$('button').click(function(e){ 
 
    if(!this.term) { 
 
    alert(1); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="term" type="text" placeholder="type here .."> 
 
<button type="button" id="btn">Check</button>