如何通过元素点击？

I want to display an image under the mouse (a finger to simulate a touch screen) when a mousedown event occurs and hide it when the mouseup event occurs, but when I do this, the image I display blocks the subsequent mouse events ("click" in particular) on elements under this image. I'm using jQuery, by the way.

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

I'm sure this is something to do with event bubbling or propagating or somewhat, but I couldn't figure it out. Any pointers please?

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

4 个解决方案

#1

Check out this answer to on this post:

看看这篇文章的答案：

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

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

It seems to do what I understand what you want to achieve using a pure cross browser CSS approach.

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

pointer-events:none;

指针事件：无;

#2

Billy Moon, your code was almost working. You just have to use hide and show instead of css :

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

#3

This is untested - but is based on a working script of mine, so should be along the right lines. Basically, you have to make the layer that is in the way disappear for a moment, so you can use the elementFromPoint method and then make it come back.

这是未经测试的 - 但是基于我的工作脚本，所以应该沿着正确的方向。基本上，你必须让那个方式的图层消失片刻，这样你就可以使用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:''});
});

#4

You can do this

你可以这样做

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

Check working example at http://jsfiddle.net/2cSj4/2/