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

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

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

如果您可以在悬停时切换框,则可获得奖励积分.

Philippe Ley.. 21

如果你最顶层的元素包含在下面的元素中,你可以让事件"冒泡".如果不是,则必须手动触发点击.单击即无法触发事件处理程序.

要手动触发事件,您可以执行以下操作:

$("#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
    });
});

小智.. 19

好的,所以我认为我会做两件事:(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的浏览器使用一些javascript功能检测.你必须自己滚动,类似于Modernizr,因为它还没有测试(据我所知).我们的想法是你创建一个元素,将指针事件CSS应用于它,检查它,如果浏览器支持该功能,你将获得预期的结果,而不是null或undefined; 然后破坏元素.无论如何,一旦你有功能检测,你可以使用jQuery或类似的方法将一个监听器附加到最上面的元素,并从中分配一个点击以点击其他东西.查看jQuery并使用click()函数获取更多信息(没有足够的声誉发布链接,sry).

如果我以后有时间,我或许可以快速编写一个jsFiddle.我希望这有帮助.

如果你最顶层的元素包含在下面的元素中,你可以让事件"冒泡".如果不是,则必须手动触发点击.单击即无法触发事件处理程序.

要手动触发事件,您可以执行以下操作:

$("#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
    });
});

好的,所以我认为我会做两件事:(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的浏览器使用一些javascript功能检测.你必须自己滚动,类似于Modernizr,因为它还没有测试(据我所知).我们的想法是你创建一个元素,将指针事件CSS应用于它,检查它,如果浏览器支持该功能,你将获得预期的结果,而不是null或undefined; 然后破坏元素.无论如何,一旦你有功能检测,你可以使用jQuery或类似的方法将一个监听器附加到最上面的元素,并从中分配一个点击以点击其他东西.查看jQuery并使用click()函数获取更多信息(没有足够的声誉发布链接,sry).

如果我以后有时间,我或许可以快速编写一个jsFiddle.我希望这有帮助.