Question

我目前有一个弹出式上下文菜单。当您在其外部单击时，此弹出窗口将关闭。

这是通过弹出窗口后面的 div 完成的，该 div 占据整个窗口，并侦听 mousedown 事件。

我需要将此鼠标事件发送到图层后面页面上的元素，因此我在这些元素上调用 trigger()。

function onLayerMouseDown(e) {
  layer.hide();
  $("#menu").hide();
  target = document.elementFromPoint(e.pageX - $(window).scrollLeft(), e.pageY - $(window).scrollTop());
  if (target != null)
    $(target).trigger(e);

这对于 mousedown 和 mouseup 事件很有效，但是当鼠标按下和释放而不离开元素时发生的 click 事件永远不会被发送。

我怎样才能让点击事件也被发送？

有关图层的示例，请参见 this fiddle。在菜单打开时单击后面的文本并查看控制台。

Answer 1

这个问题很容易理解，但解决方案将取决于您的要求。发送 mousedown 事件后，脚本所做的第一件事就是隐藏 layer。这意味着它将不再检测鼠标事件。这意味着永远不会发出 click 事件，对于 layer（点击事件需要在同一元素内使用 mouseup）和 inside（{{收到的 {1}} 事件是一个副本，来自 mousedown)。请务必注意，layer 事件由浏览器管理。您不能仅通过发送 click 和 click 来触发 mousedown。这也解释了为什么 mouseup 会收到 inside 事件，因为此事件仅在 mouseup 消失后发生。

关于如何解决它，你可能：

设置 layer 函数来处理 layermousedown 事件。使用这种设计，意味着不会捕获 click 和 mousedown。
改变设计。这个想法是将 mouseup 的 pointer-events 设置为 layer：

none

$("#inside").on("mousedown", (e) => {
    console.log("inside mousedown (triggered manually from the layer)");
});
$("#inside").on("click", (e) => {
    console.log("inside click (should happen right before mousup, if the mouse stayed inside the element");
});
$("#inside").on("mouseup", (e) => {
    console.log("inside mouseup (triggered automatically when releasing mouse button)");
});

$("#button").click(() => {
    createlayer();
  return false;
});


$(document).on('click', layermousedown);

$("#menu").click(() =>{return false});

function layermousedown(e) {
    $("#layer").hide();
    $("#menu").hide();
    $("#button").prop('disabled', false);
}

function createlayer() {
    $("#button").prop('disabled', true);
  $("#layer").show();
  $("#menu").show();
  console.log("added the invisible layer");
  console.log("_______________________");
}
createlayer();

#layer {
  height: 100vh;
  width: 100vw;
  display: block;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: #000;
  pointer-events: none;
}

#menu {
  display: block;
  position: fixed;
  z-index: 2;
  top: 20px;
  left: 50px;
  background-color: #ff5;
  width: 50px;
  height: 100px;
  border: 1px solid black;
  pointer-events: auto;
}

这个想法是对 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outer"> <span id="inside">click me please</span> </div> <div id="layer"></div> <button id="button"> Add the layer again </button> <div id="menu"> <span>this is part of the menu</span> </div> 事件做出反应，并拦截元素中不应响应的 document 事件。这就是为什么有些回调返回 click。

如何从手动触发的鼠标按下触发点击事件？

1 个答案: