Javascript: страница перезагружается нажатием EventListener - PullRequest
Новая
       21

Javascript: страница перезагружается нажатием EventListener

1 голос
/ 28 января 2011

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

Встроенный код работает нормально и выглядит следующим образом: 

<p id="inline" align="left">
This is a body paragraph which changes alignment 
when a user clicks on a link below
</p>
<p>
<a href="" onclick="document.getElementById('inline').setAttribute('align', 'right'); return false;">Align Right</a>
</p>

Что касается моей проблемы, важно отметить, что return false; предотвращает перезагрузку страницы (на самом деле я не уверен, почему, и не прочь выяснить, особенно если это относится крешение моей проблемы ...).Это то, что я хочу.Мне не нужно перезагружать страницу, чтобы переместить текст вправо.

Однако я понятия не имею, как лучше всего предотвратить повторную загрузку страницы, когда мой javascript находится во внешнем файле.Вот как выглядит моя первая попытка.Я начал с html, который выглядит так: 

<p id="external" align="left">
This is a body paragraph which changes alignment 
when a user clicks on a link below. It uses an
external .js file.
</p>
<p>
<a href="" id="aRight">Align Right</a>
</p>

И javascript, который выглядит так: 

function alignListener () {
    document.getElementById('external').setAttribute('align', 'right');
}
function installListeners () {
    var aRight = document.getElementById('aRight');
    aright.addEventListener('click', alignListener, false);
}

Это почти работает, но совсем не так, как ябудет ожидать.Когда я нажимаю ссылку «Выровнять по правому краю», текст на короткое время выравнивается по правому краю, но затем я перехожу по ссылке на текущую страницу, которая сбрасывает выравнивание назад влево.

Я нашел способ решить эту проблему, используя <a href="#" ... вместо <a href="" ....Хотя это не перезагружает страницу (поэтому текст остается выровненным), это действительно приводит меня к началу, что на самом деле не то, что я хочу.Мне бы хотелось решение, подобное return false;, которое работает со встроенным JavaScript.Есть ли простой способ сделать это?Или я делаю это неправильно?

Ответы [ 2 ]

2 голосов
/ 28 января 2011

Я настоятельно рекомендую сеть разработчиков Mozilla для большинства ответов такого типа. Он легко читается и поможет вам понять JavaScript и DOM. (JavaScript хорош !, DOM неудобен ...)

В частности, для событий: https://developer.mozilla.org/en/DOM/event

В общем https://developer.mozilla.org/

Есть несколько способов остановить события: preventDefault(), stopPropagation(), return false; или использовать инфраструктуру JavaScript, как предложено выше. jQuery хорош, есть много других (YUI, Dojo, MooTools и т. д.), и все они стремятся сделать ваш JavaScript более совместимым с различными браузерами.

1 голос
/ 28 января 2011

Вы можете использовать: 

function event(e){
   var e=window.event||e;
   //do stuff
   if(e.preventDefault){e.preventDefault()}else{e.returnValue=false}
}

Обратите внимание, что для этого не нужно переходить к новой функции: .addEventListener("click",function(e){/*the above function*/})

Кросс-совместимый слушатель событий: 

if(element.addEventListener){
   element.addEventListener(eventName, function, false);
}else{
   element.attachEvent("on"+eventName, function);
}
...