Как отключить HREF, если выполняется onclick?
У меня есть якорь с установленными атрибутами HREF
и ONCLICK
. Если щелкнуть и включен Javascript, я хочу, чтобы он выполнял только ONCLICK
и игнорировал HREF
. Аналогично, если Javascript отключен или не поддерживается, я хочу, чтобы он соответствовал URL HREF
и игнорировал ONCLICK
. Ниже приведен пример того, что я делаю, который будет запускать JS и следовать по ссылке одновременно (обычно выполняется JS, а затем изменяется страница):
<A href="#" onclick="location.href='http://example.com/no-js-login'; return false;" ONCLICK="yes_js_login()">Log in</A>
, что лучший способ сделать это?
Я надеюсь на ответ Javascript, но я буду принимать любой метод до тех пор, пока он работает, особенно если это можно сделать с PHP.
Я прочитал "ссылка href выполняет и перенаправляет страницу до того, как функция onclick javascript может закончить", но она только задерживает HREF
, но не полностью отключите его. Я также ищу что-то гораздо проще.
Ответы
Ответ 1
Вы можете использовать первое неотредактированное решение, если сначала поставите 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/
Ответ 2
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>
Ответ 3
Просто отключите поведение браузера по умолчанию, используя preventDefault
и передайте event
в свой HTML.
<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>
yes_js_login = function(e) {
e.preventDefault();
}
Ответ 4
<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
столько элементов, которые вам нравятся, и щелчки по этим элементам будут проигнорированы
Ответ 5
Вы можете использовать этот простой код:
<a href="" onclick="return false;">add new action</a><br>
Ответ 6
Проще, если вы передаете такой параметр:
<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
e.stopImmediatePropagation();
}
Ответ 7
Это может помочь.
Нет необходимости в 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
- Получить полную ссылку на якорь
this.href
- откройте ссылку в новом окне.
Итак, в вашем случае это может сработать:
<a href="../some-relative-link/file"
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); "
target="_blank">
Ответ 8
Я решил ситуацию, когда мне нужен шаблон для элемента, который обрабатывал бы альтернативный регулярный 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" on onClick, когда это вызов javascript. "Return false" в вызываемой функции не работает.
Ответ 9
Это сработало для меня:
<a href="" onclick="return false;">Action</a>
Ответ 10
В моем случае у меня было условие, когда пользователь нажимает элемент "a". Условие:
Если в другом разделе было более десяти элементов, тогда пользователь не должен перенаправляться на другую страницу.
Если в другом разделе было менее десяти элементов, пользователь должен быть перенаправлен на другую страницу.
Функциональность элементов "a" зависит от другого компонента. Код внутри события кликов следующий:
var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
return true;
}else{
event.preventDefault();
return false;
}
Ответ 11
используйте следующим образом
onClick="javascript:void(0);anyfunction();"