Make only the top of a clickable item

Question

I have an element in which I want to make only the first 80 pixels that can be clicked . My html code is a bit weird because the content is reordered by css and flexbox, so I cannot add extra elements to make the first element clickable.

My html:

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

I just want the first 80 pixels of each li to be viewable. I can’t assign it to a div because on the desktop I show all the divs and on the mobile I show only some and I change the order wih flexbox and order. Thanks for the help:)

Answer 1

, :

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

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

jQuery.offset() , top . jQuery event.pageY click.

Answer 2

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

Hide result

Answer 4

CSS, div, .

pointer-events .

• CanIUse

$('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>

Hide result

Answer 5

.

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