如何在跟随链接之前显示(DOM）消息

How to display a (DOM) message before following a link

本文关键字：显示 DOM 消息 跟随 链接      更新时间：2023-09-26

我只想告诉用户下一个操作（点击链接）需要一些时间。。。（以避免重新加载页面并再次单击链接）。

我试过：

<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>
<script>
    $(document).ready(function() {
      $("a").click(function() {
        $("#message").show();
      });
    });
</script>

但是消息没有出现。点击按预期进行。

$(function() {
  $("a").click(function() {
    $("#message").stop(true, true).show(250);
    $("#message").delay(2000).hide(250);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href = "#">test foo link</a>
<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>

像这样的东西？

为了使其更具跨浏览器性（Safari、Chrome出现问题），最好使用另一个事件：

<script>
    $(document).ready(function() {
      $("a").on("mousedown", function(e) {
        $("#message").show();
      });
    });
</script>

工作起来很有魅力。当然，他们可以在释放鼠标时退出链接，但在mouseup上，你会遇到与点击相同的问题。

如果你真的想要100%，你可以在文档级别的鼠标上隐藏消息：

<script>
    $(document).ready(function() {
      $("a").on("mousedown", function(e) {
        $("#message").show();
      });
      $(document).on("mouseup", function(){
        $("#message").hide();
      });
    });
</script>
相关文章：