preventDefault() на теге

Question

preventDefault() на теге

у меня есть некоторые 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-адреса и перехода в верхнюю часть страницы?

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

378 11

jQuery javascript

11 ответов:

Comments

Ничего не найдено.

Davide Gualano · Accepted Answer · 2018-04-10 01:27:58

попробуйте что-то вроде:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});
вот страница об этом в документация jQuery

Ryan Little · Accepted Answer · 2016-11-17 22:40:29

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

событие.preventDefault ();

событие.stopPropagation ();

останавливает выполнение обратного вызова и немедленно возвращается при вызове.

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

архив статьи - события jQuery: остановка (Mis)с помощью Return False

Musaddiq Khan · Accepted Answer · 2018-04-10 01:36:55

установить href

32

2018-04-10 01:36:55

Kent Fredric · Accepted Answer · 2008-11-05 17:57:58

кроме того, вы можете просто вернуть false из события click:
 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });
который остановит запуск A-Href.

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

HATCHA · Accepted Answer · 2014-01-07 05:03:29

<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: void (0);

Jefrey Bulla · Accepted Answer · 2012-02-15 21:24:31

Это не 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>

score 4 · Accepted Answer · 2009-05-07 04:51:57

почему бы просто не сделать это в 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;
    }

1nstinct · Accepted Answer · 2014-02-04 12:07:06

после нескольких операций, когда страница должна, наконец, перейти по ссылке, вы можете сделать следующее:
          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });

sebarmeli · Accepted Answer · 2011-05-31 16:44:25

если остановка распространения события не беспокоит вас, просто использовать
return false;
в конце обработчика. В jQuery он предотвращает поведение по умолчанию и останавливает пузырящееся событие.

RPichioli · Accepted Answer · 2017-05-23 13:31:34

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

возврат события при его вызове:
<a href="" onclick="return false;"> ... </a>
Void case:
<a href="javascript:void(0);"> ... </a>
вы можете увидеть больше о в:каков эффект добавления void (0) для href и "return false" при прослушивании событий щелчка якоря тег?

A-Sharabiani · Accepted Answer · 2018-01-25 18:01:46

еще один способ сделать это в JavaScript с помощью inline onclick,IIFE,event и preventDefault():
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>