如何通过元素点击？

Question

我想在发生mousedown事件时在鼠标下方（手指模拟触摸屏）显示图像，并在鼠标事件发生时隐藏它，但是当我这样做时，我显示的图像会阻止后续鼠标事件（特别是“点击”）此图像下的元素。顺便说一下，我正在使用jQuery。

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

Answer 1

在这篇文章中查看此答案：

https://stackoverflow.com/a/4839672/589909

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

pointer-events:none;

Answer 2

比利·穆恩，你的代码几乎正常运作。你只需要使用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:''});
});

Answer 4

你可以这样做

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

检查http://jsfiddle.net/2cSj4/2/

处的工作示例