注册对另一个元素下的元素的点击

我有一个元素在具有不透明度的元素下：0.5，我希望能够点击它。我怎样才能点击“通过”最顶层的元素？注册对另一个元素下的元素的点击

下面是一个演示我的问题的例子。点击这些框来打开和关闭它们。您可以编辑它on 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>

来源

2009-07-18 Sam Hasler

我不认为我们在这里为您写出完整的解决方案。使用下面给出的建议，您应该自己实施解决方案。 SO不是免费的咨询店。 – 2009-07-18 20:12:19

我不敢相信我是唯一一个想要这样做的人。所以我认为任何演示如何去做的代码都会超出我的计划。我没有发现要求代码执行此操作的任何问题。 – 2009-07-18 20:43:00

山姆，也使用addClass而不是所有这些设置使用.css – redsquare 2009-07-18 21:58:46

OK，所以有两两件事我想我会做到：（1）CSS3答案，那就是不但被广泛采用，（2）其余的Javascript备份计划。（不知道在不支持CSS部分的旧版浏览器上没有JS的用户该怎么办）。阅读...

第一：使用此代码CSS3使上元素“隐形”鼠标交互：

pointer-events: none;

这还不是跨浏览器兼容。它只适用于SVG & Gecko & Webkit浏览器中的HTML元素，但只适用于Opera中的SVG元素，在IE中完全不可用。

每所述MDN：

CSS属性指针事件允许作者来控制元件是否或何时可以是鼠标事件的目标。此属性用于指定在什么情况下（如果有任何情况）鼠标事件应该“穿过” 一个元素，并且目标是 “该元素下面”的元素。

下面是文档：https://developer.mozilla.org/en/css/pointer-events

二：使用一些JavaScript特征检测的那些还不支持这个CSS的浏览器。你必须自己推出，类似于Modernizr，因为它尚未测试（据我所知）。这个想法是，你创建一个元素，应用指针事件CSS，检查它，如果浏览器支持该功能，你会得到预期的结果，而不是null或undefined;然后摧毁这个元素。无论如何，一旦你有功能检测，你可以使用jQuery或类似的附加一个监听器到最上面的元素，并从它分配点击点击其他的东西。查看jQuery，它使用click（）函数获取更多信息（没有足够的声望来发布链接，sry）。

如果我以后得到时间，我可能可以在其上快速处理jsFiddle。我希望这有帮助。

来源

2011-04-29 19:29:25 Lelando

如果最顶部的元素包含以下元素中，您可以让事件“泡过”。如果不是，则必须手动触发点击。只有通过单击才能触发事件处理程序。

要手动触发事件，你可以这样做：

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

EDIT（回应评论）：

要列举所有的框，你可以这样做（关闭顶部我。头没有测试，甚至不能语法错误免费）

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

来源

2009-07-18 19:59:19

我已经修改了代码，从上面到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 = $('<canvas>')[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); 
}

来源

2012-11-16 23:46:28

我觉得莱兰多得到了正确的命中。在我的情况下，我只解决了使用CSS，您可以插入指针事件：无到您的＃程序元素。

来源

2017-08-30 16:19:09 Martino

注册对另一个元素下的元素的点击

回答

相关问题