javascript - 显示链接的可点击背景 div 打开两个链接

Question

我在每张幻灯片上使用带有背景图像的 Bootstrap 轮播。每张幻灯片的顶部都显示了链接。我已经审查了一些关于 SO 的答案，但似乎没有一个解决这个问题。这是轮播中的幻灯片的样子:

            <div class="item">
                <div class="banner-link">
                    <img src="myimage.jpg" height="486" width="1024" alt="image-description">
                    <div class="holder">
                        <div class="block">
                            <div class="links">
                                <strong class="title">The links</strong>
                                <a href="/about/" class="btn btn-default">About Us</a>
                                <a href="/contact/" class="btn btn-default">Contact</a>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="link" readonly value="http://www.google.com/" /> 
                </div>
            </div>

jQuery:

$(document).ready(function () {
    $('div.banner-link').click(function () {
        if ($(this).find("input").length) {
            window.open($(this).find("input:first").val(),'_blank');

        }
    });
});

我的问题是，当我点击任何子链接时，子链接和背景图片链接都被点击了。子链接在主选项卡中打开，后台 jQuery 单击事件在新选项卡中打开。

我用 z-index 做了一些尝试，但没有解决我的问题。我怎样才能让背景图片在除子链接之外的任何地方都可以被点击？

感谢任何帮助。

Answer 1

如果我很好地理解您的帖子，您希望可以在没有背景的情况下点击链接，对吗？

如果是这样，你应该看看 stopPropagation 函数(这里是文档:http://www.w3schools.com/jquery/event_stoppropagation.asp)，如果不是，我想我误解了。

祝你有美好的一天!