单击可单击元素后面的 link

Question

我正在制作幻灯片（使用 Slick），其中 'next' 按钮只是一个覆盖整张幻灯片的 500x500px div - 因此您可以单击它的任意位置以转到下一张幻灯片。

但是，在某些幻灯片上我还需要一些文字 links。关于覆盖元素后面 links 'buried' 的类似问题，我已经看到在顶层使用 pointer-events:none 的解决方案。这让我可以单击下面的 link，但是，它也会从顶层删除 link。我也尝试过使用 z-index 和 position，但不知何故我无法在不影响 link 覆盖的情况下仅将 link 带到表面幻灯片的其余部分。

我想我正在寻找的一个示例是 Twitter 如何处理其推文中的外部 links – 您可以单击推文本身 (展开它），还有里面的 link。

如何点击 link 后面的 link？

Answer 1

您不必使用特定的 DIV 来执行 "next slide event"，您可以使用容器点击事件。像这样：

脚本：

$(document).ready(function(){
                $('#container').click(function(){
                    // Call your next slide.
                    window.redirect = 'http://www.microsoft.com';
                });
                $('#container a').click(function(e){
                    e.stopPropagation();
                    return true;
                });
            });

HTML 示例：

<div style="width: 500px; height: 500px; background-color: #f1f1f1" id="container">
            <!-- Here goes your div content -->
            Some text bla bla bla <a href="#">link</a><br><br>
            Some text bla bla bla <a href="#">link</a><br><br>
            Some text bla bla bla <a href="#">link</a><br><br>
        </div>

看看这是否能解决您的问题。

单击可单击元素后面的 link

Click link behind clickable element

css

z-index

hyperlink