如何使一小部分 div 可點擊

Question

我只想讓盒子的一小部分接受指針事件（點擊影響其后面元素的部分之外的點擊），它也不能影響盒子的外觀。 這在 Javascript/jQuery 或純 CSS 中可能嗎？

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

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

我嘗試了一個clip-path但這改變了外觀並且沒有阻止clip-path之外的點擊/指針事件。

例如，說我想要 10px x 10px 框的中心區域以允許指針事件（單擊、拖動等）

Answer 1

不可能只使元素的一部分可點擊**； 要么全是，要么全都不是。 要執行您需要的操作，請創建一個子元素並使其接受指針事件，如下所示：

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

** 您可能會在圖像上使用<map> ，但這是過時的、丑陋的，而且不是很好的做法

Answer 2

你可以這樣做：

$(".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();
    //...
  }
}