protectDefault () для тега <a> - PullRequest
Новая
       35

protectDefault () для тега <a>

115 голосов
/ 05 ноября 2008

У меня есть html / jquery, который перемещает div вверх и вниз, чтобы показать / скрыть его при нажатии на ссылку: 

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

Мой вопрос: как мне использовать preventDefault(), чтобы ссылка не действовала как ссылка и добавляла # в конец моего URL и переходила в верхнюю часть страницы?

Я не могу понять правильный синтаксис, я просто получаю сообщение об ошибке, говорящее о том, что protectDefault () не является функцией.

Ответы [ 11 ]

175 голосов
/ 05 ноября 2008

Попробуйте что-то вроде: 

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Вот страница об этом в jQuery документации

37 голосов
/ 15 августа 2011

Предполагается, что вы не используете return false, так как в результате происходит 3 вещи:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Останавливает выполнение обратного вызова и немедленно возвращается при вызове.

Так что в такой ситуации вы должны использовать только event.preventDefault();

Архив статьи - jQuery Events: Stop (Mis) с использованием Return False

36 голосов
/ 07 мая 2012

Установите атрибут href как href="javascript:;" 

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>
11 голосов
/ 07 января 2014 
<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

Использование

JavaScript: недействительным (0);

11 голосов
/ 05 ноября 2008

В качестве альтернативы, вы можете просто вернуть false из события click: 

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

Что остановит срабатывание A-Href.

Обратите внимание, однако, по соображениям удобства использования, в идеальном мире, где href все еще должен идти куда-то, для людей, которые хотят открыть ссылку в новой вкладке;)

9 голосов
/ 15 февраля 2012

Это не-JQuery-решение, которое я только что протестировал, и оно работает. 

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
5 голосов
/ 25 января 2018

Еще один способ сделать это в Javascript, используя inline onclick, IIFE, event и preventDefault(): 

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
5 голосов
/ 04 февраля 2014

после нескольких операций, когда страница наконец перейдет по ссылке, вы можете сделать следующее: 

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });
4 голосов
/ 07 мая 2009

Почему бы просто не сделать это в CSS?

Уберите атрибут 'href' в вашем теге привязки 

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

В вашем css, 

  a{
    cursor: pointer;
    }
3 голосов
/ 22 октября 2016

Вы можете использовать return false; из вызова события, чтобы остановить распространение события, оно действует как event.preventDefault();, отрицая его. Или вы можете использовать javascript:void(0) в атрибуте href для оценки заданного выражения, а затем вернуть undefined элементу.

Возвращение события, когда оно вызывается: 

<a href="" onclick="return false;"> ... </a>

Пустой корпус: 

<a href="javascript:void(0);"> ... </a>

Вы можете узнать больше о: Каков эффект добавления void (0) для href и 'return false' при прослушивании события click тега привязки?

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...