викликати функцію javascript при клацанні гіперпосилання

Я динамічно створюю гіперпосилання в коді c # за файлом ASP.NET. Мені потрібно викликати функцію JavaScript за кліком клієнта. як мені це досягти?

Ще акуратніше, замість 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="").

Найпростіша відповідь із усіх - це ...

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

За допомогою параметра onclick ...

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

Відповідь 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>

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

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

Він також може використовуватися на вхідних тегах, наприклад.

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

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

Сподіваюся, що це корисно.

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

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

Використовуйте onclickатрибут HTML .

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

Якщо ви не дочекаєтеся завантаження сторінки, ви не зможете вибрати елемент за ідентифікатором. Це рішення має працювати для тих, хто має проблеми з виконанням коду

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