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/

编辑：你还需要添加指针事件：fill;到.bottom类

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

Answer 2

如果浏览器支持不是您的问题，您可以使用CSS属性pointer-events

.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/

通过DOM图层传递点击事件

4 个答案: