最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript: Page reloads with eventListener click - Stack Overflow

programmeradmin6浏览0评论

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?

Share Improve this question edited Nov 27, 2021 at 13:20 Maik Lowrey 17.6k7 gold badges53 silver badges98 bronze badges asked Jan 28, 2011 at 1:37 WilduckWilduck 14.1k12 gold badges62 silver badges91 bronze badges
Add a ment  | 

3 Answers 3

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);
}
发布评论

评论列表(0)

  1. 暂无评论