按钮内带有背景图像的锚标记重定向到背景 href 而不是按钮 Onclick Link答案

【问题标题】：anchor tag with background image inside button redirects to the background href rather then the button Onclick Link按钮内带有背景图像的锚标记重定向到背景 href 而不是按钮 Onclick Link
【发布时间】：2019-05-17 11:21:18
【问题描述】：

我有一个带有 href 和背景图片的 div，我也有带有 onclick 的按钮，但是当我尝试单击按钮时，它不会重定向按钮链接，因为它会重定向背景 href 链接。

<div class="banner-container">
<div class="banner-box">
    <div class="banner-div">
        <div class="bannerheading">
            <p><span>The correct link should be&nbsp;</span></p>
        </div>
        <div style="text-align: test">
            <button id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>
        </div>
    </div>
    <a href="https://www.google.com/">
        <div class="banner-img" style="background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
        </div>
    </a>
</div>

如果没有 hcnaging hte HTML，任何人都可以帮助https://jsfiddle.net/uqbhcdn6/2/，如何重定向按钮点击？

【问题讨论】：

链接在按钮和链接上都打开
嗨 @Tik 它在按钮上不起作用，只有背景 href 重定向
为什么要设置pointer-events:none;到内容框，删除一切正常

标签： javascript jquery html css

【解决方案1】：

只需将 css pointer-events: fill; 添加到按钮...

<button style="pointer-events: fill;" id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>

为了您的方便，我编辑您的fiddle：https://jsfiddle.net/syamsoul/a8e1kng7/1/

【讨论】：

【解决方案2】：

删除 .banner-div 类的 pointer-events:none。上述属性不对指针事件做出反应，因此无法执行点击/悬停事件

【讨论】：