Доступ до події для виклику prevendefault від користувацької функції, що походить від атрибута onclick тегу


119

У мене є такі посилання:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

І я хотів би зробити preventDefault()всередині myfunc(), тому що в #адресний рядок буде додано повідомлення при натисканні на посилання (не роблячи return false;або href='javascript:void(0);')

Чи можливо це? Чи можу я отримати подію всерединіmyfunc()


6
Що не так з поверненням помилково?
Олексій

5
він також припиняє розповсюдження
Ому

4
return falseзупиняє розповсюдження лише у jQuery.
cruzanmo

Відповіді:


157

Я вважаю, що ви можете перейти в eventфункцію inline, яка буде eventоб'єктом для піднятої події в браузерах, сумісних з W3C (тобто старіші версії IE все ще потребуватимуть виявлення всередині вашої функції обробника подій для перегляду window.event).

Швидкий приклад .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Запустіть його так, як є, і зауважте, що посилання після сповіщення не перенаправляється на Google.
  2. Потім змініть eventпередане в onclickобробник на щось інше e, клацніть запустити, а потім помітьте, що перенаправлення відбувається після оповіщення (панель результатів стає білою, демонструючи переспрямування).

5
ОК, я бачу, що все, що мені потрібно було, - це поставити свій параметр другимmyfunc(event, {a:123, b:"asdas"})
Omu,

1
@Omu Аргумент, що передається, може бути в будь-якому місці, не повинен бути першим, якщо він знаходиться в потрібному місці певного списку параметрів для функції. Наприклад, function myfunc(o, e) {...}тоді його можна назвати як myfunc({a:1, b:'hi'}, event).
cateyes

2
Я думаю, вам не потрібно явно передавати та захоплювати об’єкт події. Ви можете просто посилатися на це у функції. Чи хтось може підтвердити? Я маю на увазі, цей код без події також повинен працювати:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij

111

Найпростіше рішення просто:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

Насправді це хороший спосіб виконувати пошук кешу для документів із резервним запасом для відсутніх веб-переглядачів (без JS)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

Якщо JavaScript увімкнено, він відкриває PDF із рядком запиту, що перебуває в кеші, якщо ні, то він просто відкриє PDF.


Можна просто використовувати серверну техніку, щоб переписати це посилання, якщо ви перебираєте кеш-пам'ять.
квітня

Було б краще, але я не маю доступу до коду сторони сервера. Робота з тим, що у мене є.
JuLo

11

Спробуйте це:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>

для цього потрібен тег <script> для кожної події клацання, що ускладнює код.
somid3

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

Тут також не погоджуються: Простий розбір вбудованої функції є більш ефективним і менш кодовим.
Шеннон Хочкінс

1
@ Somid3, в той час як JQuery не є необхідним , якщо ви турбуєтеся про продуктивність, ви можете використовувати один делегованого обробник подій , так що ви тільки прикріплення одного слухача для всіх анкерів на сторінці , як це: $("body").on("click","a",function(e) { e.preventDefault() });. В будь-якому випадку жодне рішення не має значного впливу на ефективність роботи.
KyleMit

7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>

2
Це стосується кожного якоря, і він порушить усі посилання, також потрібно вставити javascript на сторінку, а також jQuery.
Шеннон Хочкінс

Крім того, при використанні jQuery return falseне рекомендується, оскільки це також запобігає запуску всіх інших обробників подій на цьому елементі, а також зупинить події від переповнення до вищих елементів.
Штійн де Вітт

6

Додайте унікальний клас до посилань та javascript, який запобігає за замовчуванням для посилань із цим класом:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>

Цікавий підхід для глобального рішення.
АФРАКТ

5

Чи можете ви не просто видалити атрибут href з тегу?


1
так, це теж варіант, хоча за замовчуванням посилання не буде підкреслено, і якщо javascript вимкнено, не буде href переходити
Omu

4

Я думаю, що коли ми використовуємо onClick, ми хочемо зробити щось інше, ніж за замовчуванням. Отже, для всіх ваших посилань на onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});


2

Ви можете отримати доступ до події з onclick таким чином:

<button onclick="yourFunc(event);">go</button>

і при вашій функції JavaScript, моя порада додає цей вислів першого рядка як:

function yourFunc(e) {
    e = e ? e : event;
}

то використовуйте скрізь e як змінну подій



0

Без будь-якої бібліотеки JS або jQuery. Щоб відкрити гарне спливаюче вікно, якщо можливо. Не вдалося нормально відкрити посилання.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

І допоміжна функція:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.