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

Question

说我有divA部分重叠divB.我如何允许点击divA进入divB但仍然hover在悬停时被解雇divA？

我知道pointer-events:none;这会使点击通过,但它也可以防止悬停.

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

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

想象div的关系如:

这就是它的原因(读作:"让我们避免XY问题"):

我正在研究feedback.js的实现

要查看问题:

• 查看feedback.js演示
• 单击右下角的反馈按钮
• 在屏幕上绘制一个框以突出显示一个部分
• 单击"停电"按钮
• 尝试在第一个框内绘制一个框,但是 因为第一个框阻止了单击

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

这是一个jsFiddle示例

欢迎所有解决方案

Answer 1

您可以获取覆盖元素的单击事件来启动底层元素的单击事件。

原生 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>