提问人：Wilduck 提问时间：1/28/2011 最后编辑：Maik LowreyWilduck 更新时间：11/27/2021 访问量：9563
Javascript：页面重新加载，eventListener 单击
Javascript: Page reloads with eventListener click
问：
在尝试理解 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);
}
这几乎有效，但完全不是我所期望的。当我单击“右对齐”链接时，文本会短暂地向右对齐，但随后，我点击指向当前页面的链接，这会将对齐重置回左侧。
我找到了一种方法来解决这个问题，通过使用代替 .虽然这不会重新加载页面（因此文本保持对齐），但它确实将我带到了顶部，这并不是我真正想要的。我想要一个类似于适用于内联javascript的解决方案。有没有简单的方法可以做到这一点？还是我完全做错了？<a href="#" ...<a href="" ...return false;
答：
1赞
JCOC611
1/28/2011
#1
您可以使用：
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);
}
2赞
wulftone
1/28/2011
#2
我强烈推荐mozilla开发者网络来回答大多数此类问题。它很容易阅读，可以帮助你理解JavaScript和DOM。
具体而言，对于事件：https://developer.mozilla.org/en/DOM/event
一般来说，https://developer.mozilla.org/
有几种方法可以停止事件、 、 、 或使用上面建议的 JavaScript 框架。jQuery很好，还有很多其他的（YUI、Dojo、MooTools 等），它们都在努力使你的 JavaScript 与不同的浏览器更兼容。preventDefault()stopPropagation()return false;
2赞
papaqui
5/29/2021
#3
使用代替标记。<button><a>
这对我有帮助。
评论