仅使元素的顶部可单击

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

我是通过使用pointer-events和::before伪元素来实现的。 示例： http ： //codepen.io/zvona/pen/dYedMj

CSS：

div {
  height: 160px;
  background-color: blue;
  margin-bottom: 10px;
  pointer-events: none;
}

div::before {
  pointer-events: all;
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  position: absolute;
  opacity: 0;
}

JS：

$('div').on('click', function() {
  alert('clicked the top 80px');
});

Answer 2

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

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

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

演示

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

Answer 3

希望这是你正在寻找的。

根据您的评论@kyll更改了代码

 $('.parent').click(function(e){ if((e.clientX -$(this).offset().left) <= 80) alert('Click event fired'); }) 

 .parent{ width:300px; height:40px; background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"></div> 

Answer 4

这可以使用CSS指针事件来禁用主div而不是伪元素。

现在，所有最新的浏览器版本都支持pointer-events 。

• 我可以用吗

 $('div').click(function() { console.log('test'); }); 

 ul, li { list-style: none; padding: 0; margin: 0; } div { height: 100px; width: 100%; background: blue; margin-bottom: 10px; position: relative; pointer-events: none; } div:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: green; pointer-events: all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <div></div> <div></div> <div></div> </li> <li> <div></div> <div></div> <div></div> </li> </ul> 

Answer 5

你可以查看这个例子。

码

HTML

<div id="my_div">
  <a href="https://www.google.com/">
    <span id="clickable_span">
    </span>
  </a>
  <br>
  <span>
    The Battle of Concepción was fought on October 28, 1835, between Mexican troops and Texian insurgents on the grounds of Mission Concepción (pictured in 2010), 2 miles (3.2 km) south of what is now Downtown San Antonio in the U.S. state of Texas.
  </span>
</div>

CSS

#clickable_span {
    height: 80px;
    display: inline-block;
    width: 100%;
    background-color: red;
}
#my_div {
    height: 1000px;
}