Javascript：页面通过 eventListener 单击重新加载

Question

在尝试了解 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;的解决方案return false; 与内联 javascript 一起使用。 有没有一种简单的方法可以做到这一点？ 还是我完全做错了？

Answer 1

对于大多数这些类型的答案，我强烈推荐 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 与不同的浏览器更兼容。

Answer 2

您可以使用：

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);
}

Answer 3

使用<button>而不是<a>标签。

那帮助了我。