jQuery or any: Possible to make only a part of a div clickable?

Question

is it possible to make only a part of a div clickable -- like a clickmap/imagemap? May with jQuery? Hint: i don't want edit the html (misused template with 200 separate html files).

Answer 1

When your div is clicked, the event handler receives the event, so you can test the position of the click.

If needed, you might want to use the clicked element position and size, using $(this).offset() , $(this).width() and $(this).height(). For example :

$('mydivselector').click(function(e) {
     if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
          // bottom was clicked

     } else {
          // up of the div was clicked

     }
});

If you want to prevent default action and event propagation, return false from the event handler.

Answer 2

You can try to make a jQuery selector of all the element, and to slice for some

var selector = "#mydiv";
var numberOfElements = $(selector).find('*').length/2; //It's just an example

$(selector).find('*').slice(0, numberOfElements).click(function()  {
 [....]//do stuff
});

Answer 3

You would probably need to make the whole div clickable but then by checking what coordinates was clicked figure out if you would like to handle the event or not.

Answer 4

You can check the value of the offsetX and offsetY properties on the event object, and decide to do nothing if you don't like them.

Example.

Alternatively, if you need the click event to not fire at all, you could dynamically create additional transparent <div>s and place them partially in front of your existing element so that they obscure the parts which you don't want to respond to clicking.