How to inactivate the empty area of a div?

Asked

Viewed 116 times

2

I have a div on add mouse events but wanted the mouse hit only to work where content existed and ignore the po ex margins.

Follow the image( the yellow area is the area I want to 'inactivate' since there is no content ) that illustrates the problem

inserir a descrição da imagem aqui

*Because a project limitation cannot add mouse events to the content.

Attm

javascript html css css3 xhtml
  • 1

    The margin is already ignored for events in the elements, in your case the problem would be in the padding, nay?

  • Then again the div and an image with the margin:0 auto only that the hit of the event continues to pick up in the area en white(no content) TT

  • And if you use the image itself to trigger the event while passing the mouse?

  • Or, use the mouseover of all the children of your main div, and not the div itself, in this way becomes even more dynamic.

  • Then luigibertaco the problem is that for example: I have the div that appears in the mouseover the moment the div appears and the mouse is on top the function will be called a second made unnecessarily... but quiet some ifs must solve valel

  • Put the code.

  • Without examining the code it is difficult to suggest a solution. Take a look at this: http://javascript.info/tutorial/bubbling-and-capturing

  • 1

    Thank you Maujor, very enlightening link, but I solved my problem by eliminating the white space of the div was not the solution I wanted but now the problem is gone, thanks

  • 2

    @Douglasdossantos then puts this solution as an answer so that other users can see more clearly and this question leaves the list of unanswered questions.

  • 1

    @Douglasdossantos you could create two Ivs, one that would contain the white space you need, and the other where would be the content with the hit.

Show 5 more comments

1 answer

1

You can achieve your objective detector where the click occurred in relation to your element:

Example in 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");
});

TO EXPLAIN:

The variable relX will contain the pixel distance from the left of your element to the place where the user clicked.

The variable limite sets the limit of the click, that is, indicates that up to this value both from the right and from the left the click is considered "outside".

In the example it can be seen that the click on the white zone that corresponds to a margin of 15 pixels equal to your image, goes "out". Click on the green color gives "inside".

Ilustração do exemplo no JSFiddle

The jQuery method was used offset() to translate the coordinates event.pageX and event.pageY originated with the mouse click to a pixel position relative to the element.

Browser other questions tagged javascript html css css3 xhtml

You are not signed in. Login or sign up in order to post.