如何允许点击通过div但仍然会对悬停做出反应？

Question

说我divA部分重叠divB。如何将divA上的点击转到divB，但在将鼠标悬停在hover时仍然会divA被触发？

我知道pointer-events:none;这会让点击次数通过，但也会阻止悬停。

我也尝试了以下内容，但它不允许点击通过

$(document).on('click', '.feedback-helper', function(e){
        e.preventDefault();
})

描绘div的关系，如：

以下是它的原因（读作：“让我们避免X Y问题”）：

我正在开展feedback.js

的实施

要查看问题：

• 查看feedback.js demo
• 点击右下方的反馈按钮
• 在屏幕上绘制一个框以突出显示某个部分
• 点击“停电”按钮
• 尝试在第一个框中绘制内的框，因为点击被第一个框阻止

我需要允许在突出显示的区域上绘制一个遮光框，但如果我设置pointer-events:none;，我将失去对这些元素的其他悬停功能。

Here is a jsFiddle example

欢迎所有解决方案

Answer 1

您可以获取覆盖元素的click事件以启动基础元素的click事件。

Native JS示例：

document.getElementById('divA').addEventListener('click', function() {
  alert('Clicked A');
});
document.getElementById('divB').addEventListener('click', function() {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('click', true, false);
  document.getElementById('divA').dispatchEvent(event);
});

div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}

<div id="divA"></div>
<div id="divB"></div>

jQuery示例：

$('#divA').on('click', function() {
  alert('Clicked A');
});
$('#divB').on('click', function() {
  $('#divA').trigger('click');
});

div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}

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

Answer 2

我检查了你的示例页面，如果你在data-type =“highlight”上设置一个略低的z-index可以解决问题，那么尝试一个29990的z-index与你当前的30000相比。允许您定位突出显示的反馈区域并使用遮光元素覆盖它。

Answer 3

另一种选择是使用伪元素。也许这会做你需要的。

$('#toggleBlack').on('click', function() {
  $('#divA').toggleClass('hidden');
});

div {
  border: 1px solid black;
}
#divA {
  background: whitesmoke;
  position: relative;
}
#divA.hidden:before {
  position: absolute;
  content: ' ';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">Highlight the text once I'm hidden and cut/copy/drag</div>
<br />
<br />
<button id="toggleBlack">Toggle Hidden</button>