вызов функции javascript при щелчке по гиперссылке

Я динамически создаю гиперссылку в коде c# позади файла ASP.NET. мне нужно вызвать функцию JavaScript на клиентском клике. как мне это сделать?

9 76
javascript hyperlink

9 ответов:

аккуратнее еще, вместо 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="") устранены.

118

самый простой ответ из всех...

<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>
46

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

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>
23

ответ 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>
13

В идеале я бы избегал генерации ссылок в вашем коде вообще, так как ваш код будет нуждаться в перекомпиляции каждый раз, когда вы хотите внести изменения в "разметку" каждой из этих ссылок. Если вам нужно это сделать, я бы не вставлял ваши 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, и у него будет четкое разделение проблем.

надеюсь, что это использовать.

4

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

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

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

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

4

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

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

2

использовать onclick атрибута HTML.

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

1

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

<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>
0