javascript - 单击链接时显示加载(除了 ctrl+click)

Question

我想显示 <div>其中包含使用标签助手进行加载。我想在我有 <a> 的任何地方显示加载情况标签，除了 href='#' 。 (我没有任何ajax调用，所以点击链接后我会看到一个新的渲染页面)

  $('a:Not([class="NeedsConfirmation"])').click(function () {
    var currentURL = window.location.href;
    var element = $(this);
    if ((element.attr("href") != "#") && (element.attr("href") != currentURL))
       {
        showLoading(element);
       }
  });

现在，我想添加额外的异常(exception):目前，如果用户按下 ctrl 然后单击链接，将显示新页面，但预览页面将显示正在加载。

如何放弃调用 showLoading(element);在这种情况下？ (我对右键单击和“在新选项卡或窗口中打开”没有任何问题)

Answer 1

您可以使用传递到 .click 的事件对象。它有一个名为 ctrlKey 的属性。检查它，然后做你想做的事情。

$('a:not([class="NeedsConfirmation"])').click(function (e) {
  e.preventDefault();
  // Check if ctrl was pressed...
  if(e.ctrlKey) {
    // Ctrl was pressed during click
    alert('ctrl click');
    // Do something else.
  }
  else {
    // Ctrl was not pressed during click
    alert('not ctrl click');
    var currentURL = window.location.href;
    var element = $(this);
    if ((element.attr("href") != "#") && (element.attr("href") != currentURL))
    {
      showLoading(element);
    }
  }
});

showLoading = function(element){
  element.text('loading...');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">click me!</a>
<a href="www.stackoverflow.com">click me with link!</a>