如何通过元素点击？

Question

我想在发生mousedown事件时在鼠标下方显示图像(手指模拟触摸屏)并在鼠标事件发生时隐藏它,但是当我这样做时,我显示的图像会阻止后续鼠标事件("点击" "特别是"这个图像下的元素.顺便说一句,我正在使用jQuery.

我确定这与事件冒泡或传播或某种程度有关,但我无法弄明白.有什么指针吗？

Answer 1

看看这篇文章的答案:

/sf/answers/338777071/

它似乎做了我理解你想要使用纯粹的跨浏览器CSS方法实现的目标.

pointer-events:none;

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);
});

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:''});
});