Onclick this href javascript

Функция JavaScript в href vs. onclick

Я хочу запустить простую функцию JavaScript на клике без какого-либо перенаправления. Есть ли разница или польза между помещением JavaScript-вызова в атрибут href (например:

13 ответов

Включение onclick в href нарушит тех, кто твердо верит в разделение контента от поведения/действия. Аргумент в том, что ваше содержание html должно оставаться сосредоточенным исключительно на содержании, а не на представлении или поведении.

Типичным путем в настоящее время является использование библиотеки javascript (например, jquery) и создание обработчика событий с использованием этой библиотеки. Это выглядело бы так:

Или mootools, prototype, dojo . или просто на javascript, но это было бы намного больше кода, но оно того стоило.

Если вам не нужно ничего делать с объектом события, простой javascript довольно прост. Получите DOM-узел с помощью obj = document.getElementById (), затем установите obj.onclick = foo

Но разве вопрос не касался разницы между включением вызова JS inline в href и inline в onclick ? Предполагая, что вы по какой-то причине собираетесь вставить его в строку, что вам следует использовать? (На практике я бы сделал то, что вы предложили, но вы, похоже, пропустили разницу между этими двумя атрибутами.)

Единственный раз, когда я бы рекомендовал встроить вызов функции вместо наличия события onclick для ссылки, это если вы динамически создаете ссылки на странице, которые будут вызывать одну и ту же функцию, но могут не иметь уникальных идентификаторов. У меня есть веб-форма, где пользователь может добавлять и удалять элементы, и я помещаю щелчок мышью в href ссылок внутри динамически создаваемых элементов div, чтобы я мог быстрее начать обработку сценария, а не использовать что-то менее конкретное, например, относительный идентификатор или имя класса

еще лучше 1:

еще лучше 2:

Почему лучше? потому что return false не позволит браузеру следовать ссылке

Использовать jQuery или другую подобную структуру для привязки обработчика onclick идентификатором элемента.

Было бы другое решение, которое было бы лучшим, когда href не установлен на # а на реальную ссылку для браузеров noJS.

это не другое решение, а продолжение «еще лучше». В этом случае, если браузер не поддерживает JavaScript или он отключен, пользователь будет переведен на страницу с предупреждением \ объяснением. И если браузер поддерживает JS, то возвращение false не позволит браузеру перейти по ссылке.

Что если я скажу вам, что только первый (плохой) работает одинаково (правильно) во всех браузерах со средним кликом.

В примере кажется, что best — это альтернатива вышеприведенному, однако лучше всего — следующий шаг, используя одну из ссылок выше. Лучший может работать только при нажатии ссылки тега

Кстати, даже лучше, чем $(‘#myLink’).click(function()< MyFunction(); return false; >); Вы можете добавить его в функцию on , например: $(document).on(‘click’, »#myLink’, function() < MyFunction(); return false; >);

@Michel Мишель Эйрес — это не обязательно лучше, просто другое. и его «лучший» не самый лучший, просто средний. Лучше всего было бы отделить привязку события от логики выполнения.

Что делать, если ссылки генерируются динамически с параметрами? использование отдельного блока jquery не является лучшей практикой в этом случае

Просто мои скромные 5 центов: «лучшим» вариантом было бы использовать кнопки для щелчков (события onclick?) И оставлять привязки со своими ссылками на то, что изначально было задумано в их первоначальном замысле: быть привязками для ссылок на другие страницы.

У привязки по щелчку с javascript есть один недостаток: позже, когда вы отлаживаете кому-то еще его форму, очень трудно найти, где и какой javascript связан с этим элементом.

Я обнаружил, что $ (‘# myLink’). Click (function ()

Мишель Айрес, вы правы. href = «#» заставит большинство браузеров выполнять поиск по идентификатору и, следовательно, прокрутить до верхней части страницы. Это вообще нежелательно.

Что делать, если я хочу использовать bootstrap-confirmation в моей ссылке. Версия onclick будет работать.

Я хочу добавить лучший метод и сделать его лучше, чем лучший . Отбросьте в целом a тег бесполезного href=»#» и применить onclick обработчик непосредственно на содержание. Если содержимое является тегом, вы можете просто применить к myLink идентификатор myLink . Если содержимое не является тегом, myLink в него тег span и примените идентификатор myLink к span . Наконец, в CSS, добавьте cursor: pointer; , Таким образом, ссылка очень аккуратная, как кнопка, и не добавляет уродливый # в URL или не показывает этот уродливый # во всплывающей подсказке.

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

Я разработчик Android, и мне нужно выполнить диплинк на мое приложение. в этом случае ваше «плохое» решение — мое решение. Я не могу вызвать свою глубокую ссылку в функции javascript, поскольку она заблокирована Chrome на Android. Мне нужно использовать HREF!

Пожалуйста, опустите этот ответ в забвение, так как это очень плохая практика. Ссылка на «#» может иметь катастрофические последствия для вещей, которые зависят от якорей или просто от потери позиции прокрутки.

использование связывания jQuery на самом деле хуже, мы не поймем, вызывает ли HTML DOM функцию не искать файл javascript. и использование # тоже плохо, так как это изменило вашу структуру HTML.

но почему плохо? почему хорошо ? почему лучше? почему еще лучше 1? почему еще лучше 2? почему лучше? если это работает, это работает.

В терминах javascript одно отличие состоит в том, что ключевое слово this в обработчике onclick будет ссылаться на элемент DOM, атрибут onclick которого он (в данном случае элемент ), тогда как this в атрибуте href будет ссылаться на объект window .

В терминах представления, если атрибут href отсутствует в ссылке (т.е. ), то по умолчанию браузеры будут отображать курсор text (а не часто желаемый pointer курсор) поскольку он обрабатывает как привязку, а не ссылку.

С точки зрения поведения при указании действия с помощью навигации через href браузер обычно поддерживает открытие этого href в отдельном окне с помощью контекстного меню или контекстного меню. Это невозможно при указании действия только через onclick .

Однако, если вы спрашиваете, что является лучшим способом получить динамическое действие от щелчка объекта DOM, то прикрепить событие, использующее javascript отдельно от содержимого документа, является лучшим способом. Вы можете сделать это несколькими способами. Общим способом является использование библиотеки javascript, такой как jQuery для привязки события:

Источник

Get Set Remove HREF In Javascript (Simple Examples)

Welcome to a quick tutorial on how to get, set, and remove the href property in Javascript. By now, you should know href very well. That “thing” we use to specify which webpage to link to. But how can we dynamically change or remove it using Javascript? For a quick answer:

• To get the href – var link = document.getElementById(«ID»).href;
• To set the href – document.getElementById(«ID»).href = «http://site.com»;
• Alternatively, to set the href to run a Javascript function – document.getElementById(«ID»).href = «javascript:FUNCTION()»;
• To remove the href – document.getElementById(«ID»).removeAttribute(«href»);

That covers the quick basics, but read on for more examples!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

JAVASCRIPT HREF

All right, let us just now get into the mechanics of href, and a few ways we can work with it in Javascript.

1) GET, CHANGE, REMOVE HREF

1A) GET HREF

Yes, it’s as simple as that. We can get the current href with ELEMENT.href .

1B) SET HREF TO URL

To set or change the href of a link, simply assign a new one – ELEMENT.href = «http://site.com» .

1C) SET HREF TO JAVASCRIPT FUNCTION

   function foo () < alert("Foo!"); >function hrefsetjs ()

We can also set the href to run a Javascript function. But I am personally not a fan of this… Will explain more below.

1D) REMOVE HREF

• Setting an empty href – ELEMENT.href = «»
• Or removing it entirely – ELEMENT.removeAttribute(«href»)

• An empty href is equivalent to pointing to the current page itself href=»#» .
• But entirely removing the href will result in a “do nothing when clicked” link.

2) ONCLICK & JAVASCRIPT HREF

As you already know, we can use href=»javascript:FUNCTION()» to run a Javascript function. But take note that we can also attach onclick=»FUNCTION()» to do the same. What happens if we do both onclick and href=»javascript:» together? As the above example turns out, dummyB() will run first, followed by dummyA() .

But personally, I am not a fan of using href=»javascript:» . It is actually a mechanism from the past, and it is plain confusing. Just stick with onclick . If you need to run multiple functions on click, then just do onclick=»FUNCTION(); FUNCTION();» . There’s really no need to do any of the funky javascript:FUNCTION() stuff.

3) ONCLICK & URL LINK TOGETHER

Lastly, let us try out another “funky combination” – We have a href=»URL» link and an onclick attached. So what happens here is, the onclick will run first before opening the URL link. At least on Google Chrome.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

EXTRA) JAVASCRIPT VOID!?

In some tutorials, you may spot something like this:

Basically, this means “do nothing on click”. But be warned – This is a blast from the past, and don’t do this anymore. In modern-day HTML and Javascript, we simply remove the href attribute.

INFOGRAPHIC CHEAT SHEET

LINKS & REFERENCES

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник