单击时跳过锚元素类型

Question

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

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:m.bluth@example.com">Skip this on click</a></li>
  <li><a href="tel:+123456789">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:m.bluth@example.com">Skip this on click</a></li>
  <li><a href="tel:+123456789">Skip this on click</a></li>
</ul>

Answer 2

谢谢大家的回答。我发现这也有效：

HTML:

<ul>
  <li><a href="">Do not skip</a></li>
  <li><a href="" target="_blank">target blank (skip)</a></li>
  <li><a href="" class="skip">class (skip)</a></li>
  <li><a href="#"># (skip)</a></li>
  <li><a href="mailto:m.bluth@example.com">mailto (skip)</a></li>
  <li><a href="tel:+123456789">tel (skip)</a></li>
</ul>

jQuery:

$('a')
  .not('[target="_blank"]')  // omit from selection
  .not('[class="skip"]')   // omit from selection
  .not('[href^="#"]')   // omit from selection
  .not('[href^="mailto"]')   // omit from selection
  .not('[href^="tel"]')   // omit from selection
  .on('click', function(e) {
      e.preventDefault();
      alert("Hello! I am an alert box!");
});

https://jsfiddle.net/jcxtd3h7/

单击时跳过锚元素类型

Skip anchor element types on click

html

anchor

jquery