Тег прив'язки HTML із подією onclick Javascript

86

Використовуючи Google, я виявив, що вони використовують події onclick у тегах прив'язки.

У додатковому варіанті в заголовку Google, це виглядає як звичайний тег, але при натисканні він не перенаправляється, а відкриває меню. Зазвичай при використанні

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Зазвичай він надходить у "more.php" без запуску show_more_menu(), але я маю показати меню на цій сторінці. Як зробити як Google ?

— smartkid
джерело

117

Якщо функція onclick повертає значення false, поведінка браузера за замовчуванням скасовується. Як такий:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

У будь-якому випадку, робить це Google чи ні, не має великого значення. Зручніше зв’язати функції onclick у javascript - таким чином ви відділяєте свій HTML від іншого коду.

— TJHeuvel
джерело

3

1. Щоб бути впевненішим, використовуйте # in href = "#" і виконуйте необхідні дії в javascript. Клацнути на це посилання можна за допомогою # href; сторінка залишає / перезавантажує URL-адресу.

— Bimal Poudel

4

Дотримуйтесь наведених порад з обережністю, оскільки в правилах HTML5 чітко зазначено, що href="#"повинно переходити до верхньої частини сторінки. Ви можете просто додати hrefаттибут без вмісту та отримати поведінку клацання. Призначення #URL-адресою реальних сторінок (а не односторінкові програми на 100% висоти), як правило, погана ідея.

— Mike 'Pomax' Kamermans

54

Ви навіть можете спробувати нижче варіант:

<a href="javascript:show_more_menu();">More >>></a>

— сонце2
джерело

1

Попередження: Якщо функція повертає будь-яке явне значення (наприклад:, return null;але ні return;), це матиме ненавмисні наслідки для деяких браузерів, таких як FireFox. На сторінці буде замінено весь вміст, що повертається значенням у форматі рядка (наприклад:) [object Object].

— rannmann

45

Наскільки я розумію, ви не хочете перенаправляти, коли натискається посилання. Ви можете зробити :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Адітя Манохар
джерело

3

Це корисно, коли ви не хочете, щоб href кудись вказував.

— kbpontius

Це круто, і це працює, але jquery видає помилку "Помилка: синтаксична помилка, невпізнаний вираз: javascript :;"

— TheOddCoder

Я використовую jQuery версії 1.10.2, і я не отримую синтаксичну помилку, яку зазнав @TheOddCoder.

— Майк Фінч,

1

Використовуйте наступний код, щоб показати меню, а не перейдіть до адрес href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Розгорніть фрагмент

— Каміль Келчевський
джерело