2

Tenho uma div on adiciono eventos de mouse mas queria que o 'hit' do mouse só funcionasse onde existisse conteúdo e ignorasse os 'margins' po ex.

Segue a imagem( a area de amarelo é a area que quero 'inativar' já que não há conteudo ) que ilustra o problema

inserir a descrição da imagem aqui

*Por uma limitação do projeto não possa adicionar os eventos do mouse no conteúdo.

Attm

10
  • 1
    O margin já é ignorado para eventos nos elementos, no seu caso o problema seria no padding, não?
    – Kazzkiq
    Commented 19/09/2014 às 17:24
  • Então denho a div e uma imagem com o margin:0 auto só que o hit do evento continua pegando na area en branco(sem conteudo) TT Commented 19/09/2014 às 17:35
  • 1
    Muito obrigado Maujor, muito esclarecedor o link, mas resolvi o meu problema eliminando o espaço em branco da div não foi a solução que queria mas agora o problema se foi, valeu Commented 19/09/2014 às 18:54
  • 2
    @DouglasdosSantos coloca então essa sua solução como resposta para que outros usuários possam ver mais claramente e esta pergunta saia do rol de perguntas sem resposta. Commented 23/09/2014 às 2:34
  • 1
    @DouglasdosSantos você poderia criar duas divs, uma que conteria o espaço em branco que vc precisa, e outra onde ficaria o conteúdo com o hit. Commented 2/10/2014 às 16:52

1 Resposta 1

1

Podes atingir o teu objetivo detetanto onde é que o clique ocorreu em relação ao teu elemento:

Exemplo no JSFiddle

$("#meuElemento").click(function(e){
    var meuOffset = $(this).offset(),
        relX      = e.pageX - meuOffset.left,
        relY      = e.pageY - meuOffset.top,
        largura   = $(this).width(),
        limite    = 15;

    // Onde foi o clique?
    if (relX>limite && relX<(largura-limite))
        $('p span').html("Dentro");
    else
        $('p span').html("Fora");
});

A Explicar:

A variável relX vai conter a distância em pixeis deste a esquerda do teu elemento até ao local onde o utilizador clicou.

A variável limite define o limite do clique, ou seja, indica que até esse valor tanto à contar da direita como a contar da esquerda o clique é considerado "fora".

No exemplo pode ser visto que o clique na zona a branco que corresponde a uma margem de 15 pixeis igual à tua imagem, dá "fora". O clique sobre a cor verde dá "dentro".

Ilustração do exemplo no JSFiddle

Foi utilizado o método de jQuery offset() para traduzir as coordenadas event.pageX e event.pageY originados com o clique do rato para uma posição em pixeis relativa ao elemento.

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 .