Пропустить типы якорных элементов при нажатии - PullRequest
Новая
       9

Пропустить типы якорных элементов при нажатии

0 голосов
/ 02 марта 2020

Как пропустить типы якорных элементов при клике? Моя цель состоит в том, чтобы, если я нажму на ссылку, она вызовет некоторые функции, но пропустит определенные типы якорных элементов. Если веб-сайт содержит ссылки с атрибутами «Пропустить это при клике» (как показано ниже), то нажатие на него не вызовет функцию. Надеемся, что приведенный ниже пример понятен.

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>

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Вы имеете в виду, основываясь на каких-то правилах? 

$('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>
0 голосов
/ 02 марта 2020

Спасибо всем за ваши ответы. Я обнаружил, что это также работает:

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/

...