在另一个元素下的元素上注册点击

我有一个元素在不透明度的元素下：0.5我希望能够点击。 如何点击“穿过”最顶层的元素？

这是一个演示我的问题的例子。 单击框以打开和关闭它们。 您可以在jsbin上编辑它以试用您的解决方案。

如果您可以在hover时切换框，则可获得奖励积分。

       body { background-color: #000; } .box {width: 50px; height: 50px; border: 1px solid white} .highlight {background-color: yellow;}   var dthen = new Date(); $('
').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"); });    
 
 
 
 
 
 
 
   

Answer 1

好的，所以我认为我会做两件事：（1）CSS3答案，尚未广泛采用，以及（2）其余的Javascript备份计划。 （不确定在不支持CSS部分的旧版浏览器上如何处理没有JS的用户）。 继续阅读……

第一：使用此CSS3代码使鼠标交互的上部元素“不可见”：

 pointer-events: none; 

这还不是跨浏览器兼容的。 它仅适用于Gecko和Webkit浏览器中的SVG和HTML元素，但仅适用于Opera中的SVG元素，而不适用于IE中的SVG元素。

根据MDN：

CSS属性指针事件允许作者控制元素是否或何时可能是鼠标事件的目标。 此属性用于指定鼠标事件应在哪个环境（如果有）中“通过”一个元素，并指定该元素“在”下面的任何内容。

这是文档： https ： //developer.mozilla.org/en/css/pointer-events

第二：对那些尚不支持此CSS的浏览器使用一些javascriptfunction检测。 你必须自己动手，类似于Modernizr ，因为它还没有测试（据我所知）。 我们的想法是你创建一个元素，将指针事件CSS应用于它，检查它，如果浏览器支持该function，你将获得预期的结果，而不是null或undefined; 然后摧毁元素。 无论如何，一旦你有function检测，你可以使用jQuery或类似的方法将一个监听器附加到最上面的元素，并从中指定一个点击以点击其他内容。 查看jQuery并使用click（）函数获取更多信息（没有足够的声誉发布链接，sry）。

如果我以后再抽出时间，我可能会在它上面快速编写一个jsFiddle。 我希望这有帮助。

Answer 2

如果你最顶层的元素包含在下面的元素中，你可以让事件“冒泡”。 如果不是，则必须手动触发点击。 只需单击即可触发事件处理程序。

要手动触发事件，您可以执行以下操作：

 $("#topelement").click(function() { $("#elementbelow").click(); return false; }); 

编辑（回复评论）：

要枚举所有框，你可以这样做（在我的头顶。没有测试，甚至不能语法错误）

 $("#topelement").click(function(e) { $(".box").each(function() { // check if clicked point (taken from event) is inside element var mouseX = e.pageX; var mouseY = e.pageY; var offset = $(this).offset; var width = $(this).width(); var height = $(this).height(); if (mouseX > offset.left && mouseX < offset.left+width && mouseY > offset.top && mouseY < offset.top+height) $(this).click(); // force click event }); }); 

Answer 3

我已经将上面的代码修改为jquery函数，有人可能会发现它很有用：

查找替代点击元素：

 $('.child').click(function(e) { $(this).siblingsUnderMouse(e).each(fn); }); 

如果要忽略图像中的透明像素：

 $('.child').click(function(e) { $(this).siblingsUnderMouse(e).each(function() { var clickOnVisiblePixel = $(this).isOnVisiblePixel(e); }); }); 

码：

 $.fn.reverse = [].reverse; $.fn.siblingsUnderMouse = function(e, filter) { filter = filter || '*'; var arr = $(); this.parent().children().filter(filter).reverse().each(function() { var t = $(this); // check if clicked point (taken from event) is inside element var x = (e.pageX - t.offset().left).toFixed(); var y = (e.pageY - t.offset().top).toFixed(); var w = t.width(); var h = t.height(); if (x < 0 || x >= w || y < 0 || y >= h) return; arr.push(t); }); return arr; } $.fn.isOnVisiblePixel = function(e) { if (e.type == 'mouseleave') return false; var t = this[0]; if (!t || t.tagName != 'IMG') t = this.find('img')[0]; if (!t) return; var w = $(t).width(); var h = $(t).height(); var o = $(t).offset(); var x = (e.pageX - o.left).toFixed(); var y = (e.pageY - o.top).toFixed(); if (x < 0 || y < 0 || x >= w || y >= h) return false; var c = $('')[0]; c.width = w; c.height = h; var ctx = c.getContext('2d'); ctx.drawImage(t, 0, 0, w, h); var a = ctx.getImageData(x, y, 1, 1).data[3]; return (a > 128); } 

Answer 4

我认为Lelando得到了正确的打击。 在我的情况下，我只使用css解决了，你可以在你的#past元素中插入指针事件：none 。