Javascript: Page reloads with eventListener click - Stack Overflow

admin管理员组

文章数量:1321812

In trying to understand javascript best practices, I'm attempting to recreate a piece of inline javascript by adding an event listener from an external javascript file.

The inline code works fine and looks like this:

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

Concerning my problem, the important thing to note here is that return false; prevents the page from reloading (I'm not actually sure why, and wouldn't mind finding out, especially if it relates to the solution to my problem...). This is what I want. I don't need the page to reload to move the text to the right.

However, I have no idea what the best way to keep the page from reloading is when my javascript is in an external file. Here's what my first attempt looks like. I started with html that looks like this:

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

And javascript that looks like this:

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

This almost works, but not at all how I would expect. When I click on the 'Align Right' link, the text briefly aligns right, but then, I follow the link to the current page, which resets the alignment back to the left.

I found a way to sort of fix that problem, by using <a href="#" ... instead of <a href="" .... While this doesn't reload the page (so the text stays aligned), it does take me to the top, which isn't really what I want. I'd like a solution similar to the return false; that works with the inline javascript. Is there a simple way to do this? Or am I doing it wrong pletely?

In trying to understand javascript best practices, I'm attempting to recreate a piece of inline javascript by adding an event listener from an external javascript file.

The inline code works fine and looks like this:

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

Concerning my problem, the important thing to note here is that return false; prevents the page from reloading (I'm not actually sure why, and wouldn't mind finding out, especially if it relates to the solution to my problem...). This is what I want. I don't need the page to reload to move the text to the right.

However, I have no idea what the best way to keep the page from reloading is when my javascript is in an external file. Here's what my first attempt looks like. I started with html that looks like this:

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

And javascript that looks like this:

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

This almost works, but not at all how I would expect. When I click on the 'Align Right' link, the text briefly aligns right, but then, I follow the link to the current page, which resets the alignment back to the left.

I found a way to sort of fix that problem, by using <a href="#" ... instead of <a href="" .... While this doesn't reload the page (so the text stays aligned), it does take me to the top, which isn't really what I want. I'd like a solution similar to the return false; that works with the inline javascript. Is there a simple way to do this? Or am I doing it wrong pletely?

• javascript
• unobtrusive-javascript
• addeventlistener

Share Improve this question Follow edited Nov 27, 2021 at 13:20 Maik Lowrey 17.6k77 gold badges5353 silver badges9898 bronze badges asked Jan 28, 2011 at 1:37 WilduckWilduck 14.1k1212 gold badges6262 silver badges9191 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I highly remend the mozilla developer network for most of these types of answers. It's easy to read and will help you understand JavaScript and the DOM. (JavaScript is good!, DOM is awkward...)

Specifically, for events: https://developer.mozilla/en/DOM/event

In general, https://developer.mozilla/

There are a few ways to stop events, preventDefault(), stopPropagation(), return false;, or use a JavaScript framework as suggested above. jQuery is good, there are many many others out there (YUI, Dojo, MooTools, etc.), and they all endeavor to make your JavaScript more patible with different browsers.

Use <button> instead of <a> tag.

That helped me.

You can use:

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

Note that this doesn't need to go on a new function: .addEventListener("click",function(e){/*the above function*/})

Cross-patible event listener:

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

本文标签： Javascript Page reloads with eventListener clickStack Overflow