如何使一小部分 div 可点击

Question

I want to make only a small section of the box accept pointer events (with clicks outside of the section affecting elements behind it) also it can't affect the appearance of the box. Is this possible in Javascript/jQuery or plain CSS?

 .box { background: black; width: 300px; height: 200px; }

 <div class="box"></div>

I tried a clip-path but that altered the appearance and didn't prevent click/pointer events outside of the clip-path .

For example say I wanted 10px x 10px area of the box in the center to allow pointer events (click, drag, etc.)

Answer 1

It's not possible to make only a part of an element clickable**; either it all is or none of it is. To do what you require create a child element and make that accept the pointer events, something like this:

 $('.click-area').on('click', function(e) { e.preventDefault(); console.log('You clicked the area'); });

 .box { background: black; width: 300px; height: 200px; position: relative; } .box .click-area { display: inline-block; position: absolute; top: 95px; left: 145px; width: 10px; height: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <a href="#" class="click-area"></a> </div>

** you could potentially use <map> on an image but that's outdated, ugly, and not good practice

Answer 2

You can do this like so:

$(".box").on('click', function(e) {
  var clickableRegion = ... //your clickable region
  var transformedx = ... //transform e.pageX to be relative to your box
  var transformedy = ... //transform e.pageY to be relative to your box
  if (/*test if click point inside clickableRegion*/) {
    e.preventDefault();
    //...
  }
}