How to inactivate the empty area of a div?

Question

How to inactivate the empty area of a div?

Navigation

#1 by (1 votes)

2

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

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

* For a project limitation, you can not add mouse events to the content.

Attm

javascript html css css3 xhtml

asked by anonymous 19.09.2014 / 19:20

1 answer

Can Entity Framework not map a table in MVC? Functions - Model, Controller

score 1 · Answer 1

You can achieve your goal regardless of 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");
});

Explain:

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

The variable limite defines the click limit, that is, it indicates that up to this value both counting from the right and counting from the left the click is considered "out".

In the example it can be seen that clicking on the white area that corresponds to a margin of 15 pixels equal to your image, gives "out". Clicking on the green color gives "in".

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