jquery - 仅使元素的顶部可点击

Question

我有一个元素，我只想让前 80 个像素可点击。我的 html 代码有点奇怪，因为内容是使用 css 和 flexbox 重新排序的，所以我无法添加其他元素来使第一个元素可单击。

我的 html 是:

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

我只希望每个li的第80个像素是可点击的。我不能将其归因于 div，因为在桌面中我显示所有 div，而在移动设备中我只显示一些，并且我使用 flexbox 和 order 更改了顺序。感谢您的帮助:)

Answer 1

您可以捕获点击位置，然后将其与元素的顶部偏移量进行比较:

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

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

<强> Demo

jQuery .offset()获取给定元素到页面边缘的距离，top 是其可用属性之一。 jQuery event.pageY获取单击事件时的鼠标位置。