Question

您好我有一个小网站，在点击事件后不断重新加载。我该如何防止这种情况？

PS：我只允许使用纯JS。

HTML

Cookie Clicker

</head>
<body>
    <header>
        <h1>Points: </h1>
        <span id="score"></span>
    </header>
    <div class="container">
        <div>
            <a href="" onclick="addPoints(1)">
                <img src="assets/graphics/Friis.png" />
            </a>
        </div>
    </div>

    <script src="assets/scripts/cookieClicker.js"></script>
</body>
</html>

JS

var points = 0,
    score = document.getElementById("score");

function addPoints(increase) {
    console.log('hit');
    points += increase;

    score.innerHTML = '' + points;
};

Answer 1

您只能修改您的HTML并且它可以正常运行：

margin-bottom: 5px

有些人这样做：

<a href="javascript:void(0);" onclick="addPoints(1)">

但是这是一个将页面滚动到顶部的锚点。如果您需要通过javascript制作，请搜索<a href="#" onclick="addPoints(1)">。

修改

阅读event preventDefault javascript函数：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

了解行为很好。

Answer 2

您可以只更改href以运行该功能，而不是使用onClick。例如：

<a href="javascript:addPoints(1);">

Answer 3

将您的代码更新为：

<a href="" onclick="addPoints(1);return false">

或

<a href="" onclick="return addPoints(1)">

让你的函数addPoints返回false。这样做的好处是，如果addPoints达到某个级别，你实际上可以让href链接到一个页面。如果addPoints返回true，则链接将用户带到该页面，返回false将使用户保持在当前页面上。

Answer 4

因为您的代码包含

而发生

   <a href="" onclick="addPoints(1)"> // These Can Reload Same Page
   <a href="#" onclick="addPoints(1)"> // Modify upper code to these code

点击事件后HTML页面不断重新加载

4 个答案:

修改