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".
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.
margin
já é ignorado para eventos nos elementos, no seu caso o problema seria nopadding
, não?