Слушатель событий, не работающий на якоре

Это может быть очень глупый вопрос, но я отчаялся прямо сейчас. Я пытаюсь выполнить яваскрипт функции, нажав на якорь, как это:Слушатель событий, не работающий на якоре

<head> 
<script type="text/javascript"> 
    function myFunction() { 
     alert('It was clicked'); 
    } 
    Anchor.addEventListener('click', myFunction, false); 
</script> 
</head> 
… 
<a href="#" id="Anchor">Click me</a>

Но это не работает.

Однако, это работает отлично:

<a href="javascript:myFunction()" id="Anchor">Click me</a>

И даже это делает:

<a href="#" onclick="myFunction()" id="Anchor">Click me</a>

Что такое правильный путь? Что я делаю не так? A jsfiddle for example here.

Дополнительно:

Я настроил другие события, используя тот же метод, но почему-то якорь только один, который не работает. Пример:

<script type="text/javascript"> 
    function aFunction() { 
     AnElement.style.display = 'none'; 
    } 
    window.addEventListener('load', aFunction, false); 
</script>

И элемент спрятан совершенно нормально, когда окно закончило загрузку.

источник

2014-08-12 arielnmz

Проблема заключается в том, что вы размещали свой сценарий на HEAD разделе. Anchor не существует к моменту запуска скрипта, и из-за этого вы получали Anchor is not defined.

Попробуйте эту измененную версию, которая поместит скрипт после определения html.

DEMO

<a href="#" id="Anchor">Click me</a> 
<script> 
    function myFunction() { 
     alert('It was clicked'); 
    } 
    Anchor.addEventListener('click', myFunction, false); 
</script>

источник

2014-08-12 20:36:13

Пожалуйста, введите код в ответ, а не ссылку. – Barmar

Спасибо, я не знал об этом. Я думал, что символы были оценены после загрузки документа. – arielnmz

@Barmar: done :) –

Просто потому, что вы даете тег атрибут ID, как id="Anchor" не означает, что вы можете назвать это непосредственно из JavaScript, как вы делаете: Anchor.addEventListener('click', myFunction, false);

Вы на самом деле нужно найти элемент, прежде чем связывать событие.

document.getElementById('Anchor').addEventListener('click', myFunction, false);

источник

2014-08-12 20:34:08 Brennan

На самом деле, да, вы можете. Идентификаторы превращаются в глобальные переменные. – Barmar

@ Бармар, в некоторых местах. Это не по всем направлениям и, конечно же, не очень хорошая идея. – Brennan

вы Шоул добавить привязку после события Pageload и использовать getElementById.

function myFunction() { 
    alert('It was clicked'); 
} 
window.onload = function() { 
    document.getElementById('Anchor').addEventListener('click', myFunction, false); 
}

источник

2014-08-12 20:36:45 Callebe

Теперь я вижу, почему мой слушатель событий не работает благодаря Claudio, и ваше решение отлично работает с 'head'. Спасибо. – arielnmz

Anchor - это идентификатор. Первый символ идентификатора должен быть строчным (id = "anchor"). С помощью document.getElementById() вы можете запрашивать элементы DOM, используя свой идентификатор.

var domElement = document.getElementById("anchor");

Когда вы используете JQuery, вы можете также использовать следующий, чтобы получить элемент по его ID:

$("#anchor")

источник

2014-08-12 20:41:33

Слушатель событий, не работающий на якоре

ответ

Смежные вопросы