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

Question

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

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

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

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

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Phi*_*ert 21

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

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

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

Run Code Online (Sandbox Code Playgroud)

编辑(回复评论):

要枚举所有框,你可以做到这一点(在我的头顶.没有测试,甚至不能语法错误)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 19

好的,所以我认为我会做两件事:(1)CSS3答案,尚未广泛采用,以及(2)其余的Javascript备份计划.(对于不支持CSS部分的旧浏览器,不知道如何处理没有JS的用户).继续阅读......

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

pointer-events: none;

Run Code Online (Sandbox Code Playgroud)

这还不是跨浏览器兼容的.它仅适用于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.我希望这有帮助.

归档时间：	16 年，4 月前
查看次数：	15342 次
最近记录：	8 年，2 月前