Question

这基本上就是我所拥有的：

<a href="http://somelink.com">
    <span>stuff</span>
    <span onclick="AwesomeFunction();">more stuff</span>
    <span>the last stuff</span>
</a>

现在，问题是我想将父级保留为链接，但如果用户使用onclick事件单击跨度，我不希望浏览器关注该链接。

我试过

event.stopPropagation();

但这似乎只是停止了点击onclick事件，或者我做错了。

我目前处于紧缩模式，我不想花太多时间重写生成此HTML的代码，但它仍然不能成为一个黑客，因为它是在一个非常重要的功能实现现场。任何帮助表示赞赏。

Answer 1

让javascript方法返回false！

或者您也可以使用event.preventDefault()代替event.stopPropagation()

Answer 2

当然，只需在onclick中返回false

类似

<a href="somwhere" onclick="return false;">nothing happens</a>

Answer 3

<a href="http://somelink.com">
    <span>stuff</span>
    <span onclick="AwsomeFunction(); return false;">more stuff</span>
    <span>the last stuff</span>
</a>

Answer 4

要取消对链接的点击，最佳做法是在链接处理程序中执行以下两项操作...

使用event.preventDefault()。
返回false

说明

这两个都应该足够，但是都有文件记录和充分使用。同时使用两者可以确保理想的跨浏览器兼容性。引用event.returnVal ...

上的MDN开发人员文档

Event属性returnValue指示是否已阻止此事件的默认操作。默认情况下将其设置为true，以允许执行默认操作。将此属性设置为false会阻止默认操作。（来源：MDN Web Docs: Event.returnValue。）

还有event.preventDefault上的文档...

事件接口的preventDefault（）方法告诉用户代理，如果未明确处理事件，则不应像通常那样采取其默认操作。（来源：MDN Web Docs: Event.preventDefault()。）

我的主要灵感是去回答，因为没有其他答案可以正常演示了，所以您在这里！（在JavaScript 和 jQuery中）

JavaScript

document.getElementById('move-button').onclick = function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
};

<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

jQuery

$('#move-button').on('click', function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

当子元素的onclick触发时，是否可以阻止浏览器跟踪链接？

4 个答案:

说明

JavaScript

jQuery