HTML-тег <a> хочет добавить работу href и onclick

123

Я хочу спросить о теге HTML

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Как сделать это тег работает с HREF и OnClick ? (предпочитайте сначала запускать onClick, а затем href)

232

У вас уже есть то, что вам нужно, с незначительным изменением синтаксиса:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

Поведение <a>тега onclickи hrefсвойств по умолчанию - выполнить onclick, а затем следовать за ним, hrefпока onclickне вернется false, отмена события (или событие не было предотвращено)

— Ян
источник

Есть ли способ сделать это с помощью функции element.addEventListener?

— TheEquah

4

У меня не работает, пока я не поставлю href="#"туда вместо настоящего URL.

— yegor256 07

Я использую структуру laravel, поэтому в моем представлении лезвия я включил это, он не работает, кто-нибудь пробовал это с laravel?

— Ваджира Прабуддхака

Это решение не работает, если у меня есть какой-либо метод действия, вызываемый в контроллере mvc в href. Может кто-нибудь помочь?

— DharaPPatel

10

Используйте jQuery . Вам нужно запечатлеть clickсобытие, а затем перейти на сайт.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

Развернуть фрагмент

— Судипта Чаттерджи
источник

12

Я не буду использовать фреймворк javascript. но спасибо за ответ

7

Выше не актуальная ссылка. Его нельзя открыть в новой вкладке, и это очень плохая практика. Если что-то может быть открыто в новой вкладке (имеет URL-адрес), всегда добавляйте значимый hrefатрибут.

— Nux

2

Для этого используйте следующий html:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Вот рабочий пример .

— Камил Келчевски
источник

Это работает для меня в Chrome, однако Safari, похоже, запускает функцию, но не открывает href ... какие-либо предложения?

— Бен

@Ben Я провел тест на скрипке без JS - только чистый html: <a href="http://example.com" >Item</a>и в Chrome я вижу какое-то сообщение, позволяющее странице запускать эту ссылку (предупреждение в конце строки URL-адреса Chrome). В сафари в консоли я вижу предупреждение: [заблокировано] На странице fiddle.jshell.net/_display не разрешено отображать небезопасный контент с example.com - так что, вероятно, это проблема безопасности (только на скрипке?)

— Камил Килчевски,

1

Не требуется jQuery.

Некоторые говорят, что использование onclick- плохая практика ...

В этом примере используется чистый javascript браузера. По умолчанию кажется, что обработчик кликов будет оценивать перед навигацией, поэтому вы можете отменить навигацию и сделать ее самостоятельно, если хотите.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

— TeamDman
источник

-1

Используйте ng-clickвместо onclick. и это так просто:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

— Мак-273
источник

Только в AngularJS

— Corrodian