Javascript：页面通过 eventListener click 重新加载答案

【问题标题】：Javascript: Page reloads with eventListener clickJavascript：页面通过 eventListener click 重新加载
【发布时间】：2011-06-16 23:24:30
【问题描述】：

在尝试了解 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。有没有一种简单的方法可以做到这一点？还是我完全做错了？

【问题讨论】：

标签： javascript unobtrusive-javascript addeventlistener

【解决方案1】：

使用<button> 代替<a> 标签。

这对我有帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以使用：

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

【讨论】：