点击时跳过锚点元素类型

Question

如何在点击时跳过锚点元素类型？我的目标是，如果单击链接，它将调用一些函数，但会跳过某些锚元素类型。如果网站包含具有“单击时跳过”属性（如下所示）的链接，则单击它不会触发该功能。希望下面的示例是可以理解的。

https://jsfiddle.net/jo1myq8f/

$('a').on('click', function() {
  // Do something
  alert("Hello! I am an alert box!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="">Do not skip</a></li>
  <li><a href="" target="_blank">Skip this on click</a></li>
  <li><a href="" class="example">Skip this on click</a></li>
  <li><a href="#">Skip this on click</a></li>
  <li><a href="mailto:[email protected]">Skip this on click</a></li>
  <li><a href="tel:[phone]">Skip this on click</a></li>
</ul>

Answer 1

您的意思是基于某些规则？

$('a')
  .not("[target]")  // omit from selection
  .not("[class]")   // omit from selection
  .on('click', function() {
  const href = $(this).attr("href");
  if (
    href==="#" ||
    href.startsWith("mailto") || 
    href.startsWith("tel")) return;
  alert("Hello! I am an alert box!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="">Do not skip</a></li>
  <li><a href="" target="_blank">Skip this on click</a></li>
  <li><a href="" class="example">Skip this on click</a></li>
  <li><a href="#">Skip this on click</a></li>
  <li><a href="mailto:[email protected]">Skip this on click</a></li>
  <li><a href="tel:[phone]">Skip this on click</a></li>
</ul>