Como fazer para que um evento seja disparado uma única vez?
<div>
<span class="oi">
OI
</span>
</div>
$('.oi').mouseenter(function(){
alert('OLÁ');
});
Este é apenas um exemplo simples.
Recomendo você utilizar o método .one(), já que ele foi desenvolvido justamente para situações como a que você descreveu. Ele dispara o evento para dado elemento apenas uma vez. Após isso o evento é desatado do elemento.
$('.oi').one('click', function(){
alert('OLÁ');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<button class="oi">Click me!</button>
</div>
No exemplo acima apenas o primeiro click em <button>
vai fazer com que o alert()
seja exibido na tela. Isso porque o evento será automaticamente removido pelo jQuery do elemento após a primeira vez.
Uma solução simples:
$('.oi').on('mouseenter', function(){
alert('OLÁ');
$('.oi').off('mouseenter');
});
Como o método on
adiciona eventos a um elemento, o off
remove esses eventos.
Segue uma solução:
$(function() {
$('div').on('mouseenter', function() {
$('h1').html('Mouse Dentro');
})
.on('mouseleave', function() {
$('h1').html('Mouse Fora');
// Remove os eventos de mouseenter e mouseleave
// Se você não for realmente fazer nada na saida do mouse
// Basta utilizar o off dentro da funcão de mouseenter
$('div').off('mouseenter').off('mouseleave');
});
});
div { background: #eee;position: fixed;top: 0;left: 0;bottom: 0;right: 0;color: #333;font-size: 28px;text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1>Mouse Fora</h1>
</div>
Você pode usar uma variável booleana para saber se é a primeira vez que o evento está sendo disparado e depois setá-lo para false.
var primeiravez_mouseenter = true;
$('.oi').mouseenter(function(){
if(primeiravez_mouseenter)
{
alert('OLÁ');
primeiravez_mouseenter = false;
}
});
Boa tarde, você pode criar uma váriavel global para verificar isso, por exemplo:
<script>
var verifica = true;
$('.oi').mouseenter(function(){
if(verifica){
alert('OLÁ');
verifica = false;
}
});
</script>
<div>
<span class="oi">
OI
</span>
</div>