jQuery 如何通过元素传递点击?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5398787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I pass a click through an element?
提问by Paul Higgins
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 事件时在鼠标(模拟触摸屏的手指)下显示图像并在发生 mouseup 事件时隐藏它,但是当我这样做时,我显示的图像会阻止后续的鼠标事件(“单击" 特别是)在此图像下的元素上。顺便说一下,我正在使用 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?
我确定这与事件冒泡或传播有关,但我无法弄清楚。请问有什么指点吗?
回答by brenjt
Check out this answer to on this post:
在这篇文章中查看这个答案:
https://stackoverflow.com/a/4839672/589909
https://stackoverflow.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;
touch-action:none;
pointer-events:none;
touch-action:none;
回答by Pouf
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);
});
回答by Billy Moon
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:''});
});
回答by Hussein
You can do this
你可以这样做
$(document).bind('mousedown mouseup', function() {
$('.finger').toggle();
});