вызывать функцию javascript при нажатии гиперссылки

Ответы:

133

Аккуратнее еще, вместо typical href="#"или href="javascript:void"или href="whatever", я думаю , что это имеет гораздо больше смысла:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Если Javascript не работает, есть обратная связь. Кроме того, устраняется неустойчивое поведение (переход по страницам в случае href="#", посещение той же страницы в случае href="").

karim79
источник
13
+1 На данный момент это единственный ненавязчивый ответ. +100, если бы мог.
Джеймс
@Lewis, да, в идеале теги <a> не использовались бы для чистых js-вызовов, но, к сожалению, старые браузеры не поддерживали: hover для элементов без ссылок. Поэтому ссылки часто использовались для запуска js-событий.
Крис Ван Опсталь,
@ Крис - Я не уверен, что ты понял мою точку зрения, Крис. Я предлагаю вам не использовать <a href="#"> ничего не делать </a>, а вместо этого использовать <a href="a/link/somwhere.html"> сделать что-нибудь </a>, а затем использовать прогрессивное улучшение для отмены href. Это самое чистое решение. Якоря в порядке, но они должны делать ЧТО-ТО, если javascript отключен - или по какой-то причине (согласно IE6) какой-то javascript сломался до того, как обработчик был создан и назначен. Таким образом, все ваши пользователи будут довольны.
Льюис,
2
Не работает для меня, просто автоматически выполняет функцию onclick при загрузке страницы. Это также похоже на кошмар, когда речь идет о доступности.
Шон Соломон
4
Это не работает, а просто перенаправляет вас на URL-адрес href.
паддотк
58

Самый простой ответ ...

<a href="javascript:alert('You clicked!')">My link</a>

Или чтобы ответить на вопрос о вызове функции javascript:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>

Джейден Лоусон
источник
2
Ссылка в StackOverflow «Выполнить фрагмент кода» не работает в Firefox (предупреждение не создается), но она работает в FF, когда я помещаю этот тип ссылки на обычную веб-страницу.
the_pwner224 09
Да, это странно, у меня это работало, теперь - нет. У других были аналогичные проблемы, и, похоже, нет однозначного решения, кроме полной переустановки Firefox.
Джейден Лоусон
26

С параметром onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>
amischiefr
источник
запутанное заявление. он собирается на google.com или вызывает функцию javascript? что имеет приоритет?
Нгуай-эль,
12

Ответ JQuery. Поскольку JavaScript был изобретен для разработки JQuery, я привожу вам пример этого в JQuery:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>
Elcuco
источник
53
JavaScript был изобретен для разработки jQuery? Это новый!
palswim
35
Это было похоже на чтение того, что Лего было изобретено, чтобы построить Лего Бэтмена.
Шон Соломон
5
@ShawnSolomon Я рад, что мы согласны :)
elcuco
1
@elcuco, отличный сарказм! + 'd :) Да здравствует JQuery
Zuul
6

Я предпочитаю использовать метод onclick, а не href для гиперссылок javascript. И всегда используйте оповещения, чтобы определить, какая у вас ценность.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

Его также можно использовать для входных тегов, например.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

Марки
источник
3

В идеале я бы вообще избегал создания ссылок в вашем коде, так как ваш код будет нуждаться в перекомпиляции каждый раз, когда вы захотите внести изменения в «разметку» каждой из этих ссылок. Если бы вам пришлось это сделать, я бы не встраивал ваши «вызовы» javascript в ваш HTML, это вообще плохая практика, ваша разметка должна описывать ваш документ, а не то, что он делает, это работа вашего javascript.

Используйте подход, при котором у вас есть определенный идентификатор для каждого элемента (или класса, если его общая функциональность), а затем используйте прогрессивное улучшение, чтобы добавить обработчик (-ы) событий, например:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

Таким образом, ваш код не сломается для пользователей с отключенным JS, и у него будет четкое разделение проблем.

Надеюсь, что это будет полезно.

Льюис
источник
1
Почему С #? Почему не просто так <a href="https://stackoverflow.com/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>?
Mahmoodvcs
2

Я бы обычно рекомендовал использовать element.attachEvent (IE) или element.addEventListener (другие браузеры) вместо установки события onclick напрямую, поскольку последнее заменит любые существующие обработчики событий для этого элемента.

attachEvent / addEventListening позволяют создавать несколько обработчиков событий.

Саймон
источник
1

Используйте onclickатрибут HTML .

onclickОбработчик событий захватывает событие клика от пользователей кнопки мыши на элементе , к которому onclickприменяется атрибут. Это действие обычно приводит к вызову метода сценария, такого как функция JavaScript [...]

Пончик
источник
1

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

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>
user2197701
источник