3

Quero executar um código, mas esse código só pode ser executado caso o mouse não esteja sobre uma div. Testei o .mouseout() mas ele verifica se o mouse saiu, não é isso, eu preciso verificar se o mouse naquele momento não está ali dentro, caso não esteja execute o código.

Alguma solução?

0

3 Respostas 3

4

Verifique se o elemento está sofrendo hover, se não estiver é porque o mouse não está sobre ele:

var mouseFora = !$(meuElemento).is(":hover");

Fonte

5
  • Sou iniciante em js, como posso fazer para que caso isto seja verdade, execute uma linha de codigo? Obrigado!
    – Leonardo
    17/12/2015 às 18:04
  • 1
    @LeonardoCarmo if(mouseFora) { ... } ou simplesmente (se não for reutilizar a variável) if ( !$(meuElemento).is(":hover") ) { ... } (em outras palavras, o que eu estou guardando na variavel mouseFora é um boolean, que pode ser usado diretamente numa comparação)
    – mgibsonbr
    17/12/2015 às 18:04
  • É isso mesmo amigo! Muito obrigado!
    – Leonardo
    17/12/2015 às 18:06
  • @LeonardoCarmo Certeza que quer marcar minha resposta como aceita? A do KaduAmaral está bem mais completa... :)
    – mgibsonbr
    17/12/2015 às 18:13
  • Gostei da dele, porem para que o que eu precisava o setTimeout não é preciso, pois a pagina já atualiza sozinha, então não é necessário. Eu so precisava realmente disso!
    – Leonardo
    17/12/2015 às 19:27
3

Pode usar o is do jQuery, como parâmetro pode passar seletores, funções, elementos e seleção, mais detalhes na documentação.

Exemplo:

$(document).on('click', '.executa', function(event){
   // Obs: setTimeout apenas para dar tempo de colocar ou tirar o mouse
   // da área para realizar testes. Em uma situação real
   // já se usa o IF direto
   setTimeout(function(){
     if ($('#area').is(':hover')){
    	alert('Mouse na área');
     } else  {
    	alert('Mouse fora da área');
     }
  }, 2000);
});
#area{
  width:300px;
  height:300px;
  background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="area"></div>
<button class="executa">Executa</button>

1

Existe uma biblioteca chamada jQuery outside events que implementa eventos "de fora" que são executados quando evento ocorrer fora do elemento em questão.

Esse são os eventos "de fora": clickoutside, dblclickoutside, focusoutside, bluroutside, mousemoveoutside, mousedownoutside, mouseupoutside, mouseoveroutside, mouseoutoutside, keydownoutside, keypressoutside, keyupoutside, changeoutside, selectoutside, submitoutside

Abaixo um exemplo do evento mouseoveroutside que é disparado quando mouse estiver fora do elemento.

/*
 * jQuery outside events - v1.1 - 3/16/2010
 * http://benalman.com/projects/jquery-outside-events-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");

$(function(){
  
  var elem = $("#elemento");

  // quando o mouse estiver sobre o elemento
  elem.bind('mouseover', function(event){
    console.log()
    $(this)
    .removeClass('dentro')
    .children('#header').text('Dentro');
  });

  // evento quando o foco do mouse estiver fora do elemento
  elem.bind('mouseoveroutside', function(event){    
    $(this)
    .addClass('dentro')
    .children('#header').text('Fora');
  });
  
});
  #elemento {
    font-family: Arial;
    color: black;
    width: 150px; 
    height: 150px; 
    border-radius: 5px; 
    text-align: center; background-color: #CCC;
  }
  #elemento.dentro { background-color: RoyalBlue; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="elemento">
  <h1 id="header"></h1>
</div>

Github do Projeto

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 .