Question

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

我试过了：

<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>

但是这条消息并没有显示出来。点击按预期进行。

Answer 1

$(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>

这样的东西？

Answer 2

为了使其更具跨浏览器（Safari，Chrome给出了问题），使用其他事件会更好：

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

就像一个魅力。当然，他们可以在释放鼠标时退出链接，但在鼠标上你会遇到与点击相同的问题。

如果您真的想要100％，那么您可以在文档级别上隐藏鼠标上的消息：

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

如何在跟踪链接之前显示（DOM）消息

2 个答案: