ein Event-Handling gerade einmal

Question

Zur Zeit habe ich dieses Stück Code:

var tracked = false; 
$('.button').on('click', function(e){ 
    e.preventDefault(); 
    // do stuff on each click 
    if(!tracked) { 
     // track interaction just once 
     tracked = true; 
    } 
}); 

.. aber ich will es elegantere Sache machen ich nicht tracked var überall für jede interaktive haben. Also ich denke dabei:

... aber es sieht nicht so schön aus. Kann es besser sein?

Bearbeitet zum Hinzufügen: Die Schaltfläche schaltet ein Element, das ich bei jedem Klick ausführen muss, um, aber verfolgt die Interaktion nur einmal, nicht bei jedem Klick.

Answer 1

.one() ist alles was Sie brauchen. Sie können dies zusammen mit .on() verwenden, um mehrere Ereignis-Listener zu demselben Button hinzuzufügen, sodass Sie verschiedene Ereignisse auslösen und einige deaktivieren können, andere jedoch nicht.

Das Ereignis .one() wird einmal ausgelöst und dann selbst entfernt, das zusätzliche Ereignis .on() klickt und bleibt weiterhin aktiviert.

// add a listener that will only fire once 
 
$('.button').one('click', function(e){ 
 
    console.log('one click event'); 
 
}); 
 

 
// add another listener that will continue to fire 
 
$('.button').on('click', function(e){ 
 
    console.log('regular click event'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">Click Me</button>

Wenn Sie es so kompakt wie möglich möchten Sie einige Jquery Verkettungs verwenden können. Diese

$('.button').one('click', function(e){ 
    // tracking code 
}).on('click', function(e){ 
    // toggling code 
}); 

Answer 2

ist im Wesentlichen die gleiche wie Ihr Code mit der .one() Funktion, wenn auch mit einem weniger Rückruf. Ich habe das Gefühl, dass es eleganter ist.

$('#selector').bind('click', function() { 
 
     $(this).unbind('click'); 
 
     console.log('Clicked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='selector'>Click Me</button>

Answer 3

Eine weitere Option so etwas wie

function oneTime(el) { 
 
    console.log("ok"); 
 
    el.onclick = null; 
 
}

<button onclick="oneTime(this);">test</button>

Aber ich .one() glauben wäre, ist die beste Option .

Answer 4

$('.button').data("tracked", false).on('click', function(e){ 
    e.preventDefault(); 
    if($(this).data("tracked") !== true) { 
     $(this).data("tracked", true); 
     // do stuff on each click 
    } 
});