如何使用if-statement关闭悬停效果

Question

有没有人可以帮我写一个函数使用一次后关闭它的代码？

我基本上有一个onMouseover函数，当你将鼠标悬停在链接上时，它会弹出一个js警报。我希望它在第一次悬停后停止工作，这样链接就可以点击了。代码如下：

{% if user.is_authenticated %}

    <li class="nav-item mx-0 mx-lg-1">
        <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" onmouseover="myFunction()" href="{% url 'logout' %}" >Logout</a>
    </li>

    <script>
        function myFunction() {
            alert("Warning! All shopping cart data will be lost if you logout.");
        }
    </script>

{% else %}

    <li class="nav-item mx-0 mx-lg-1">
        <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="{% url 'app_001:user_login' %}">Login</a>
    </li>

{% endif %}

Answer 1

你可以在这种情况下设置一个标志，并在你的函数中使用它。在下面的代码中尝试一下。当你将鼠标悬停在链接上时，你会看到alert熄灭了，但再次操作它就不会显示了。然后重新加载页面并再次尝试，您将使alert再次启动。

​

var flag = false;

function myFunction() {
  if (!flag) {
    alert("Warning! All shopping cart data will be lost if you logout.");
    flag = true;
  }
}

<ul>
  <li class="nav-item mx-0 mx-lg-1">
    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" onmouseover="myFunction()" href="{% url 'logout' %}" >Logout</a>
  </li>
</ul>

​

codepen：https://codepen.io/justdan/pen/QWwBEZR?editors=1010