prevenDefault () у тезі <a>

133

У мене є 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-адреси та перейти на верхню частину сторінки?

Я не можу зрозуміти правильний синтаксис, я просто продовжую отримувати помилку

prevenDefault () не є функцією.

javascript jquery

— Кріс Дж Аллен
джерело

194

Спробуйте щось на кшталт:

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

Ось сторінка про це в документації на jQuery

— Девіде Гуалано
джерело

53

Встановіть 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>

— Мусаддік Хан
джерело

Гарний маленький коштовний камінь для якорів - дякую! Хтось може описати, чому це працює?

— Justinpage

8

Атрибут @KLVTZ hrefанкерного тегу ( a) може бути не порожнім ... Але ми можемо встановити його javascript:<code-here>, тобто законно / дійсно. Потім вводимо <code-here>лише порожній вислів, додаючи крапку з комою. Таким чином посилання нічого не робить.

— Штійн де Вітт

1

Дуже дякую! Це дозволило мені реалізувати функцію кнопки "назад" (запам'ятовуючи стан, встановлене pushState () на всіх сторінках) у сухарі CalePHP, як це $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');

— Патронат

38

Не рекомендується використовувати return false, оскільки в результаті виникають 3 речі:

event.preventDefault ();
event.stopPropagation ();
Зупиняє виконання зворотних дзвінків і повертається негайно при виклику.

Тож у такому типі ситуації вам слід реально лише користуватися event.preventDefault();

Архів статті - події jQuery: Зупинка (помилка), що використовує Return False

— Райан
джерело

13

Крім того, ви можете просто повернути помилку від події клацання:

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

Що зупинить спрацювання A-Href.

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

— Кент Фредрік
джерело

1

так, я думаю, я відповідав на те, що я вважав, що ваш намір був замість питання :)

— Кент Фредрік

Щодо того варто, багато років тому говорили, що ви повинні повернутися -1, щоб запобігти спрацьовуванню href. Я не думаю, що це працює в БУДЬ-яких браузерах, і ви повинні "повернути помилкові", щоб запобігти перескакуванню сторінки.

— Ренді

12

Це не-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>

— Джефрі Булла
джерело

12

<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);

— ХАТЧА
джерело

@AhmadSharif Я сьогодні протестував FF 40.0.3 та IE 11, роботи ще тривають.

— HATCHA

1

Я думаю, що void (0) може бути негарним / заплутаним для користувачів, які можуть бачити це, коли навести на нього посилання. Ви можете фактично поставити будь-який дійсний JS, тому мені подобається помітити коментар, який описує, що він робить. наприкладhref="javascript:// Send Email"

— Colllin

11

Ще один спосіб зробити це в JavaScript , використовуючи inline onclick, IIFE, eventі preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— А-Шарабіані
джерело

Привіт, або просто<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot

6

після кількох операцій, коли сторінка нарешті повинна перейти на посилання, ви можете зробити наступне:

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

            window.location = href;
          });

— 1 інстинкт
джерело

1

Навіщо робити preventDefault, а потім виконувати дії за замовчуванням самостійно? Просто виконайте те, що вам потрібно додати, і нехай за замовчуванням все-таки відбудеться.

— натханва

5

Чому б просто не зробити це в 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;
    }

1

Таким чином, втрачається атрибут: hover у поганих браузерах (тобто сім'ї)

— Strae

4

Якщо зупинення розповсюдження події вас не турбує, просто скористайтеся

return false;

в кінці вашого обробника. У jQuery він перешкоджає поведінці за замовчуванням, і він зупиняє бурхливість події.

— себармелі
джерело

4

Ви можете скористатися за return false;допомогою виклику події, щоб зупинити розповсюдження події, він діє як event.preventDefault();нехтування ним. Або ви можете використовувати javascript:void(0)атрибут href для оцінки заданого виразу, а потім повернутися undefinedдо елемента.

Повернення події під час її виклику:

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

Недійсний випадок:

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

Більше про це можна дізнатись у: Який ефект від додавання void (0) для href та «повернути помилку» на слухача подій клацання тегу прив’язки?

— RPichioli
джерело