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函数（这里是doc：http://www.w3schools.com/jquery/event_stoppropagation.asp），如果没有，我想我误解了。

祝你有个美好的一天！

Answer 2

如果您只想在单击图像时打开新链接，则需要将单击事件更改为仅在单击图像时触发，然后查找其父级而不是此。

$(document).ready(function () {
    $('div.banner-link img').click(function () {
        if ($(this).parent().find("input").length) {
            console.log($(this).parent().find("input:first").val());
        }
    });
});

你可以清理它，然后我把它改为登录到控制台，因为打开一个新窗口进行测试非常烦人。使用您在两个不同div上提供的代码。

用很多单词编辑：

所以这个$（this）对象将是点击的项目。我们已将要触发的元素定义为任何具有banner-link类的div内的img标记。 $（this）成为img对象，但我们想要隐藏输入（不移动它）。要做到这一点，你可以使用$（this）.parent（）获取相关的div.banner-link，如果你不这样做，你可以得到任何/所有的div.banner-link＆＃39;由于页面上有多个。现在，您可以在正确的位置继续正常查找第一个输入并获取其值。

希望这有帮助！

带有链接的可点击背景div将打开两个链接

2 个答案: