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="" ...。虽然这不会重新加载页面（所以文本保持对齐），但它确实把我带到了顶部，这不是我想要的。我想要一个与内联javascript一起使用的return false;类似的解决方案。有一个简单的方法吗？还是我完全做错了？

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> 标签。

这对我有帮助。

Javascript：使用eventListener单击重新加载页面

3 个答案: