如何使一个元素可以被点击穿透？

Question

当鼠标按下时（模拟触摸屏幕的手指），我想在鼠标下方显示一张图片，当鼠标抬起时隐藏它，但是当我这样做时，我显示的图片会阻塞后续鼠标事件（特别是“点击”）在该图片下方的元素。顺便说一下，我正在使用jQuery。

我确定这与事件冒泡或传播有关，但我无法弄清楚。请给予任何指针。

- Paul Higgins

---

将图像的 z-index 设为较低值，将其下方的父元素设为较高的 z-index - 您还需要给该父元素设置 position: relative; 以使其正常工作。 - Shadow The Spring Wizard

谢谢@Shadow Wizard，但我需要手指图像出现在所有内容的顶部，这样看起来就像手指在按屏幕。 - Paul Higgins

以Hussein的代码为基础，如何看待这个新想法？http://jsfiddle.net/yahavbr/2cSj4/10/现在手指随着鼠标移动，您应该能够点击任何您喜欢的东西。 - Shadow The Spring Wizard

可能是重复的问题：如何通过 DIV 点击到底层元素？ - Luke Stevenson

Answer 1

请查看此帖子中的答案:

https://dev59.com/s3A65IYBdhLWcg3wsg2B#4839672

这似乎可以通过纯CSS跨浏览器方法实现您想要实现的目标。

pointer-events:none; touch-action:none;

- brenjt

---

不完全跨浏览器。低于IE11的所有浏览器都不支持pointer-events: none。不过有一个JS回退方案：http://www.vinylfox.com/forwarding-mouse-events-through-layers/。 - ProblemsOfSumit

注意：如果您在DOM中使用pointer-events: none;到外部元素，您可以将pointer-events: auto;应用于内部元素以捕获事件。 - BeatnikDude

指针事件：无；非常好:D。（另外，IE已经死了）哦，等等，你是在2014年发布的。 - Andrew

Answer 2

Billy Moon，你的代码几乎是可以工作的。你只需要使用hide和show而不是css：

$('#finger').click(function(e){
  evt = e || window.event;

  // make finger disappear
  $('#finger').hide(0);

  // get element at point of click
  starter = document.elementFromPoint(evt.clientX, evt.clientY);

  // send click to element at finger point
  $(starter).click();

  // bring back the finger
  $('#finger').show(0);
});

- Pouf

---

我相信jQuery会负责正确设置e，因此evt = e || window.event是多余的。 - Alex W

Answer 3

这段代码没有经过测试，但基于我的一个可用脚本，应该是正确的。基本上，您需要让挡住视线的层消失一会儿，这样您就可以使用elementFromPoint方法，然后再让它重新出现。

$('.selector').click(function(e){
    evt = e || window.event;

    // make finger disappear
    $('.finger').css({display:'none'});

    // get element at point of click
    starter = document.elementFromPoint(evt.clientX, evt.clientY);

    // send click to element at finger point
    $(starter).click();

    // bring back the finger
    $('.finger').css({display:''});
});

- Billy Moon

---

谢谢@Billy Moon，看起来很有前途（我不知道elementFromPoint），但到目前为止，我没有得到正确的元素返回 - 我似乎得到了一些顶级元素（就我所知，像“html”或“document”）。如果我使用这个方法得到了正确的结果，我会继续尝试并更新。 - Paul Higgins

Answer 4

你可以做到这个

$(document).bind('mousedown mouseup', function() {
    $('.finger').toggle();
});

请查看工作示例http://jsfiddle.net/2cSj4/2/

- Hussein

---

谢谢，这个可以显示/隐藏手指，但是事件仍然被阻止了。 - Paul Higgins

@Hussein，好的，谢谢。我会尝试这样做 - 这有点棘手（整个站点都有onclick属性，还有一个具有自己事件结构的谷歌地图），但从长远来看，这可能是正确的方法。 - Paul Higgins

@paul 如果你想使用onclick，你可以设置position:absolute;并使用z-index:-1;。查看这个链接http://jsfiddle.net/2cSj4/4/ - Hussein

@Paul，最好使用jQuery来处理所有事件，而不是混合使用诸如onclick这样的内联事件和jQuery事件。随着代码变得越来越复杂，这将使您的代码更易于阅读和排查问题。 - Hussein

@Hussein，谢谢（再次！）-不幸的是，我无法使用z-index为-1，因为我需要手指出现在所有其他元素的上方（因此出现了问题）。也感谢您向我展示jsfiddle，这是一个非常方便的工具。 - Paul Higgins