Как отключить HREF, если выполняется onclick?


98

У меня есть привязка с обоими HREF и ONCLICKустановленными атрибутами. Если щелкнуть и Javascript включен, я хочу, чтобы он только выполнялся ONCLICKи игнорировался HREF. Точно так же, если Javascript отключен или не поддерживается, я хочу, чтобы он следовал HREFURL-адресу и игнорировал ONCLICK. Ниже приведен пример того, что я делаю, при котором выполняется JS и выполняется одновременный переход по ссылке (обычно выполняется JS, а затем страница изменяется):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

как лучше всего это сделать?

Я надеюсь на ответ Javascript, но я приму любой метод, если он работает, особенно если это можно сделать с помощью PHP. Я уже читал « ссылка href выполняется и перенаправляет страницу до того, как функция javascript onclick сможет завершиться », но это только задерживает HREF, но не полностью отключает ее. Я тоже ищу что-нибудь попроще.


4
Я бы использовал для привязки один с href, а другой без. При загрузке страницы проверьте, включен ли javascript, отображается ли правильный якорь, иначе покажите другой.
ewein

1
@ewein Почему? Звучит как слишком много разметки для простой функции.
Supuhstar

Ответы:


61

Вы можете использовать первое неотредактированное решение, если сначала поставите return в onclickатрибуте:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Пример: https://jsfiddle.net/FXkgV/289/


1
Мне нравится, насколько здесь чисто! Однако принятое решение дает мне больше контроля относительно того, игнорируется ли HREF
Supuhstar

За последние пару лет я изменил свое мнение; это лучшее решение
Supuhstar

Как здорово!
DrunkDevKek

Но это не работает с реакцией JSX. Это сработает?
Coder

1
это сэкономило много времени.
Марк Лозано

61
    yes_js_login = function() {
         // Your code here
         return false;
    }

Если вы вернете false, это должно предотвратить действие по умолчанию (переход к href).

Изменить: К сожалению, это не работает, вместо этого вы можете сделать следующее:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

1
Отредактированный ответ не отвечает на вопрос, поскольку удаляет действительную ссылку.
Итаи Бар-Хаим

12
альтернативно использовать onclick="return yes_js_login();"с yes_js_loginвозвратомfalse
Уве Кляйне-Кениг

1
@cgogolin посмотри мой ответ.
Гейб Роган

для тех, кто все еще застрял, может добавить эту строчкуevent.stopImmediatePropagation()
didxga

35

Просто отключите использование браузера по умолчанию preventDefaultи передайте его eventв свой HTML.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

1
return false не работает в полимере ... вышеупомянутое решение действительно сработало ... Спасибо
Paras Sachapara 07

16
<a href="http://www.google.com" class="ignore-click">Test</a>

с jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

с JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Вы назначаете класс .ignore-clickлюбому количеству элементов, которые вам нравятся, и щелчки по этим элементам будут игнорироваться.


Это отличное решение! Я использовал его для кнопок, которые у меня есть, что при нажатии псевдокласс .btn-loadingдобавляется к нажатой ссылке, а затем в случае успеха галочка (при ошибке X) заменяет анимацию загрузки. Я не хочу, чтобы кнопку можно было снова нажимать в некоторых случаях (как для успеха, так и для ошибки), используя это, я могу просто $(elemnent).addClass('disabled')и легко достичь функциональности, которую я искал, элегантным способом!
Мэтью Мэтисон

14

Вы можете использовать этот простой код:

<a href="" onclick="return false;">add new action</a><br>

5

Это проще, если вы передадите такой параметр события:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}

1
У меня это не работает. Мне нужно использовать e.preventDefault ()
Милан Симек

2

Это может помочь. Не требуется JQuery

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Этот код выполняет следующие действия: передает относительную ссылку в Google Docs Viewer.

  1. Получите полную ссылочную версию якоря, this.href
  2. откройте ссылку в новом окне.

Итак, в вашем случае это может сработать:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

1

Я решил ситуацию, когда мне нужен был шаблон для элемента, который альтернативно обрабатывал бы обычный URL или вызов javascript, где функции js нужна ссылка на вызывающий элемент. В javascript «this» работает как ссылка на себя только в контексте элемента формы, например кнопки. Мне не нужна была кнопка, просто появление обычной ссылки.

Примеры:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Атрибуты href и onClick имеют одинаковые значения, за исключением того, что я добавляю «return false» в onClick, когда это вызов javascript. Наличие «return false» в вызываемой функции не сработало.


почему их двое? Почему вы помещаете JS в HREF?
Supuhstar

Supuhstar, Фактический код динамический, javascript, и будет генерировать элемент <a> для нескольких сотен элементов, которые определены извне. Каждый элемент будет либо указывать статический адрес ссылки, и именно здесь сгенерированный элемент <a> должен использовать обычное «поведение href». Или для элемента указывается вызов функции javascript, и в этом случае поведение элемента <a> рассчитывается на основе контекста элемента. А в коде генератора <a> я просто хотел скопировать все, что указано для каждого элемента, не проверяя, является ли это адресом ссылки или вызовом функции javascript.
Бо Йохансон

Я не понимаю, как это отвечает на мой вопрос. Кто сказал, что мне нужно несколько сотен ссылок? Я действительно не понимаю смысла всего этого или даже половины того, что вы только что сказали.
Supuhstar 08

1

Это сработало для меня:

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

1
Спасибо за ответ и добро пожаловать в Stack Exchange! К сожалению, это, похоже, не добавляет никаких новых знаний, поскольку кажется, что предыдущие ответы уже предполагают это. Если согласны, то лучше проголосуйте за них. Если вы не согласны, отредактируйте свой ответ, чтобы стали известны ваши новые знания!
Supuhstar 08

0

В моем случае у меня было условие, когда пользователь щелкал элемент «а». Состояние было:

Если в другом разделе было больше десяти элементов, то пользователя не следует перенаправлять на другую страницу.

Если в другом разделе меньше десяти элементов, то пользователя следует перенаправить на другую страницу.

Функциональность элементов "а" зависит от другого компонента. Код в событии щелчка следующий:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.