javascript - 如何获取所有层上的鼠标事件？

Question

我有一个带有一些重叠元素的网格(请参阅片段中的模型)。我需要针对不同层的鼠标事件。

左键单击应该转到网格单元格(我必须知道单击了哪个单元格)。右键单击应该去覆盖。我应该怎么做？

目前我已经设法得到:

• [snippet] 右键单击​​工作正常，左键单击重定向到叠加层的父级(可能与直接位于其下的不同)
• [没有 z-index 的代码片段] 左键单击可以正常工作，只有在覆盖父单元格的位置单击覆盖时，右键单击才有效

var eventDescription = $('span');

$('table').on('click', 'td', function() {
  var cell = $(this);

  var column = 1 + cell.index();
  var row = 1 + cell.closest('tr').index();
  
  eventDescription.text('Left click on cell ' + row + ', ' + column + '.');
});

$('table').on('contextmenu', 'div', function() {
  eventDescription.text('Right click on ' + this.getAttribute('id') + '.');
  return false;
});

table {
  border-collapse: collapse;
}

td {
  position: relative;
  border: 1px black solid;
  height: 20px;
  width: 20px;
}

div {
  position: absolute;
  top: 2px;
  left: 2px;

  background-color: #e52e4e;
  width: 62px;
  height: 16px;
  z-index: 2;
}

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

<table>
  <tr><td><td><td><td><td>
  <tr><td><td><div id="bar1"></div></td><td><td><td>
  <tr><td><td><td><td><td>
  <tr><td><td><td><td><td>
  <tr><td><div id="bar2"></div><td><td><td><td>
</table>

<span></span>

Answer 1

如果我正确理解您的问题，那么一种解决方案是使用 div 来防止“指针事件” (即覆盖)元素，在鼠标的“左键单击”事件循环期间。

您可以通过 mousedown 拦截点击周期的开始事件 - 此时你可以切换你的类 <div/> (覆盖)带有 pointer-events:none 的元素以防止后续的鼠标/指针事件触发您的 div。

通过这样做，您允许左键单击事件有效地绕过 <div/>元素，这意味着相应的 mouseup 将响应 <td/> “好像 div 不存在”。

然后您将使用 mouseup事件做两件事:

1. 执行 td/cell 检测逻辑(之前在常规 click 事件中)
2. 恢复 div 的默认指针事件行为元素通过再次切换指针事件类

这是一个工作示例:

var eventDescription = $('span');

$('table').on('mousedown', 'td', function(event) {

  // When td is left clicked, toggle the 'stop-events' class
  // on all div/overlay elements. This prevents the divs from
  // firing the contextmenu/rightclick event that you want to
  // distinguish for those
  if(event.button === 0) {
    for(const node of document.body.querySelectorAll('div')) {
      node.classList.toggle('stop-events')
    }
  }
})

$('table').on('mouseup', 'td', function(event) {

  // If left mouse button released on td, perform the regular
  // cell detection logic, but also restore the default point-events
  // behaviour so that divs still respond to context click
  if(event.button === 0) {
    
    var cell = $(this);

    var column = 1 + cell.index();
    var row = 1 + cell.closest('tr').index();

    eventDescription.text('Left click on cell ' + row + ', ' + column + '.');
  
    // Restore default pointer events to allow contextmenu events
    // on divs
    for(const node of document.body.querySelectorAll('div')) {
      node.classList.toggle('stop-events')
    }
  }
})


$('table').on('contextmenu', 'div', function() {

  eventDescription.text('Right click on ' + this.getAttribute('id') + '.');
  return false;
});

table {
  border-collapse: collapse;
}

td {
  position: relative;
  border: 1px black solid;
  height: 20px;
  width: 20px;
}

div {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: #e52e4e;
  width: 62px;
  height: 16px;
  z-index: 2;
}

/* Added this class */
.stop-events {
  pointer-events:none;
}

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

<table>
  <tr><td><td><td><td><td>
  <tr><td><td><div id="bar1"></div></td><td><td><td>
  <tr><td><td><td><td><td>
  <tr><td><td><td><td><td>
  <tr><td><div id="bar2"></div><td><td><td><td>
</table>

<span></span>