Make only the top of an element clickable

Question

I have an element where I want to only make the 80 first pixels clickable. My html code is a bit weird because the content is reordered with css and flexbox so I can't add additional elements to make the first element clickable.

My html is :

<ul>
    <li>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
    </li>
</ul>

I just want the 80 first pixel of every li be clickable. I can't attribute it to a div because in desktop I show all the div and in mobile I only show some and I change the order wih flexbox and order. Thanks for the help :)

Answer 1

You can capture the click position, then compare it to the top offset of the element:

$('li').click(function (e) {
    var posY = $(this).offset().top;

    if (e.pageY - posY <= 80) {
        alert('Boom!');
    }
});

Demo

jQuery .offset() gets the distance to the edges of the page for a given element, and top is one of its available properties. jQuery event.pageY gets the mouse position at the time of the click event.