通过DOM层传递点击事件

Question

我有一个div，它定位在页面底部并位于页面上方的所有内容之上。我添加了阴影以消除下面内容的突兀截止线。但是，由于技术上点击了阴影，因此我无法点击“.container”区域中的任何链接。

有没有办法通过该div层传递事件并能够点击“container”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/，它应该有助于理解我的问题。

- cusejuice

---

不，其实不用。最好将它移动到阴影前面。虽然可以通过传递点击事件来实现，但可能需要编写比你愿意的更多的代码。 - Kevin B

Answer 1

您可以添加

标签

.

pointer-events:none;

请在您的CSS中的.bottom-wrap类中添加以下内容：http://jsfiddle.net/aY2Ld/1/。同时，您还需要将pointer-events:fill;添加到.bottom类中。更新后的Fiddle链接为：http://jsfiddle.net/aY2Ld/4/。

- imbask

---

那么如何单击<div class="bottom"> div中的“Click”锚点呢？在这里尝试一下：http://jsfiddle.net/aY2Ld/3/ - cssyphus

尝试将 pointer-events: fill; 添加到您的 .bottom 类中，应该可以解决问题 :) - imbask

啊啊啊...你说得完全正确。如果你在你的fiddle中改变那个，那么你就有了正确的答案（至少在我看来是这样）。 - cssyphus

Answer 2

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

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

但是要使内部内容变得活跃，您需要像这样进行重置：

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

Fiddle : http://jsfiddle.net/aY2Ld/5/

- Karl-André Gagnon

---

那么如何单击<div class="bottom"> div中的“Click”锚点？在您的fiddle中尝试一下--这里，我添加了警报到此其他fiddle。 - cssyphus

@gibberish 你用的是什么浏览器？对我来说它完美地工作。 - Karl-André Gagnon

谷歌浏览器 - 你尝试过在我的评论中的小把戏吗？警告显示“评论”，而不是“嗨”（单击“CLICK”锚点应该会弹出“嗨”）。 - cssyphus

Answer 3

你应该实现自己的事件链。 例如：

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

尽管它可以工作，但我不建议使用pointer-events:none;，因为它的支持不太好。

- Frederik.L

Answer 4

尝试将指针事件设置为“none”；覆盖 div。参见此页面的示例：http://css-tricks.com/almanac/properties/p/pointer-events/

- Jav