jquery - 通过 DOM 层传递点击事件

Question

我有一个位于页面底部的 div，位于页面上的所有内容之上。我包括一个阴影来消除下面内容的苛刻截断。但是，我无法单击“.container”区域中的任何链接，因为我在技术上单击了阴影顶部。

有没有办法通过这个 div 层传递事件并能够单击“容器”div 中的链接？

<div class="bottom-wrap">
    <div class="shadow"></div>
    <div class="bottom">
      <a href="http://www.google.com" class="#topButton">Click</a>
    </div>
</div>

<div class="container">
    // a bunch of content here
</div>

我创建了这个 jsFiddle http://jsfiddle.net/aY2Ld/应该有助于理解我的问题。

Answer 1

你可以加

pointer-events:none;

到您的 CSS 中的 .bottom-wrap 类

http://jsfiddle.net/aY2Ld/1/

编辑：您还需要添加指针事件：填充；到 .bottom 类

更新小提琴：http: //jsfiddle.net/aY2Ld/4/

Answer 2

如果浏览器支持不是你的问题，你可以使用 CSS 属性指针事件

.bottom-wrap {
    pointer-events:none;
}

但是要使里面的内容处于活动状态，您需要像这样重置它：

.bottom-wrap .bottom {
    pointer-events:auto;
}

小提琴：http: //jsfiddle.net/aY2Ld/5/

Answer 3

您应该实现自己的事件链。

例如：

$('.shadow').click(function() {
    $('.under-shadow').trigger('click');
});

虽然它会起作用，但我不推荐使用，pointer-events:none;因为它没有得到很好的支持。

Answer 4

尝试将指针事件设置为无；对于覆盖的 div。有关示例，请参见此页面：http: //css-tricks.com/almanac/properties/p/pointer-events/