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

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

ArrayList

<强> Demo

jQuery .offset()获取给定元素的页面边缘的距离，$('li').click(function (e) { var posY = $(this).offset().top; if (e.pageY - posY <= 80) { alert('Boom!'); } });是其可用属性之一。 jQuery event.pageY在点击事件发生时获取鼠标位置。

Answer 3

希望这就是你要找的东西。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

现在，所有最新浏览器版本都支持

pointer-events。

CanIUse

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 5

您可以查看THIS示例小提琴。

<强> CODE

<强> 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;
}

仅使元素的顶部可单击

5 个答案: