在另一个元素下的元素上注册点击 [英] registering clicks on an element that is under another element
问题描述
我的元素位于不透明度的元素下：0.5我希望能够点击。如何单击穿过最顶层的元素？
I have elements that are under an element with opacity:0.5 that I want to be able to click on. How can I click "through" the topmost element?
这是一个演示我的问题的示例。单击框以打开和关闭它们。您可以在在jsbin 上对其进行编辑，以试用您的解决方案。
Here's an example that demonstrates my problem. Click on the boxes to toggle them on and off. You can edit it on jsbin to try out your solution.
奖励积分如果您可以在悬停时切换框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; }
.box {width: 50px; height: 50px; border: 1px solid white}
.highlight {background-color: yellow;}
</style>
<script type="text/javascript">
var dthen = new Date();
$('<div id="past">').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px'
,'position': 'absolute'
,'width': '200px'
,'top': '0px'
,'background-color': 'grey'
,'opacity': '0.5'
})
.appendTo("#container");
setInterval(function(){
dNow = new Date();
$('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px');
},10)
$(".box").click(function(){
$(this).toggleClass("highlight");
});
</script>
</head>
<body>
<div id="container">
<div class="box" style="position:absolute; top: 25px; left: 25px;"></div>
<div class="box" style="position:absolute; top: 50px; left: 125px;"></div>
<div class="box" style="position:absolute; top: 100px; left: 25px;"></div>
<div class="box" style="position:absolute; top: 125px; left: 125px;"></div>
<div class="box" style="position:absolute; top: 225px; left: 25px;"></div>
<div class="box" style="position:absolute; top: 185px; left: 125px;"></div>
</div>
</body>
</html>
推荐答案
好的，所以有两件事我认为我会做：（1）CSS3答案，尚未广泛采用，以及（2）其余的Javascript备份计划。 （对于不支持CSS部分的旧浏览器，不知道如何处理没有JS的用户）。继续阅读...
OK, so there are 2 things I think I would do: (1) a CSS3 answer, that isn't yet widely adopted, and (2) a Javascript backup-plan for the rest. (not sure what to do about users without JS on older browsers that don't support the CSS part). Read on...
首先：使用此CSS3代码使鼠标交互的上部元素不可见：
First: Use this CSS3 code to make the upper element 'invisible' to mouse-interaction:
pointer-events: none;
这还不兼容跨浏览器。它只适用于SVG& Gecko中的HTML元素& Webkit浏览器，但仅限于Opera中的SVG元素，而不是IE中的所有。
This is not yet cross-browser compatible. It only works on SVG & HTML Elements in Gecko & Webkit browsers, but only on SVG elements in Opera, and not at all in IE.
每个MDN：
CSS属性指针事件允许
作者控制
元素是否或何时可能是鼠标
事件的目标。这个属性用于
指定在哪种情况下（如果
any）一个鼠标事件应该通过
一个元素并定位该元素下面的
下面。
The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.
以下是该文档： https://developer.mozilla.org/en/css/pointer-events
第二：使用一些javascript功能检测那些尚未支持此CSS的浏览器。您必须自己滚动，类似于 Modernizr ，因为它尚未对此进行测试（至我的知识）。我们的想法是你创建一个元素，将指针事件CSS应用于它，检查它，如果浏览器支持该功能，你将获得预期的结果，而不是null或undefined;然后破坏元素。无论如何，一旦你有功能检测，你可以使用jQuery或类似的方法将一个监听器附加到最上面的元素，并从中分配一个点击以点击其他东西。查看jQuery并使用click（）函数获取更多信息（没有足够的信誉发布链接，sry）。
Second: Use some javascript Feature Detection for those browsers that don't yet support this CSS. You'll have to roll your own, similar to Modernizr, since it doesn't test for this yet (to my knowledge). The idea is that you create an element, apply the pointer-events CSS to it, check for it, and if the browser supports the feature, you'll get the expected result, as opposed to something null or undefined; then destroy the element. Anyway, once you have feature detection, you can use jQuery or similar to attach a listener to the uppermost element and assign a click from it to click through to something else. Check out jQuery and it's use of the click() function for more info (not enough reputation to post the link, sry).
如果我以后有时间，我可能会能够快速完成jsFiddle。我希望这会有所帮助。
If I get time later, I might be able to work up a quick jsFiddle on it. I hope this helps.
这篇关于在另一个元素下的元素上注册点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
