Событие доступа для вызова preventdefault из пользовательской функции, происходящей из атрибута onclick тега


119

У меня есть такие ссылки:

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

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

Это возможно? Могу я провести мероприятие внутриmyfunc()


6
Что не так с return false?
Alex

5
он также останавливает распространение
Ому

4
return falseостанавливает распространение только внутри jQuery.
cruzanmo

Ответы:


157

Я считаю, что вы можете перейти eventк встроенной функции, которая будет 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"})
Ому

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 (без очистки кеша, если нет 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-файл.


Можно просто использовать технологию на стороне сервера, чтобы переписать эту ссылку, если перебор кеша - это все, что вам нужно.
mpen 04

Было бы лучше, но у меня нет доступа к коду на стороне сервера. Работаю с тем, что у меня есть.
JuLo 05

11

Попробуй это:

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

для этого требуется тег <script> для каждого события щелчка, что усложняет код.
somid3 04

Также требуется 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не рекомендуется, так как это также предотвратит запуск всех других обработчиков событий в этом элементе и остановит всплытие события на более высокие элементы.
Stijn de Witt

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>

Интересный подход к глобальному решению.
AFract

5

А нельзя просто удалить атрибут href из тега?


1
да, это тоже вариант, хотя по умолчанию ссылка не имеет подчеркивания, а если javascript отключен, не будет href для перехода
Ому

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.