4

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.

5 Respostas 5

7

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.

1
4

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.

2

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>

1
  • É exatamente isso que eu estava procurando obrigado Commented 1/03/2016 às 17:47
1

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;
    }      
});
0

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .