如何停止＃跳转到页首的调用JavaScript函数的链接 [英] how to stop # links that call javascript functions from jumping to top of page

问题描述

）>

点击后跳转到页面顶部？

解决方案很多时候你会看到人们使用 onclick 属性，而简单的 return假在它的末尾。虽然这确实可行，但它有点难看，可能会让你的代码库难以管理。

 < a href = ＃onClick =submitComment（）; return false;> 
  

从您的JavaScript中分离HTML

如果你将你的标记与你的脚本分开，这对你和你的项目来说都好多了。

 < ; a id =submithref =enableScripts.html>发表评论< / a> 
  

通过上面的HTML，我们可以找到这个元素并为用户点击时连接一个处理程序元素。我们可以从一个外部的.js文件中完成所有这些工作，这样我们的HTML仍然很干净，没有任何脚本： $ b

  if（document.addEventListener）{
 document.addEventListener（DOMContentLoaded，setup，false）; 
} else if（document.attachEvent）{
 document.attachEvent（onreadystatechange，setup）; 
} else {
 document.onload = setup; 
} 
 
函数setup（）{
 var submit，submitComment; 
 submit = document.getElementById（submit）; 
 submitComment = function（e）{
 e = e || window.event; 
 e.preventDefault（）; 
 alert（您点击链接！）; 
}; 
 if（submit.addEventListener）{
 submit.addEventListener（click，submitComment，false）; 
} else if（submit.attachEvent）{
 submit.attachEvent（onclick，submitComment）; 
} else {
 submit [onclick] = submitComment; 
 
 
  

上面的代码有很多，但让我们从30,000英尺的地方跑过去。我们首先确定在浏览器加载页面时如何最好地设置我们的代码。理想情况下，我们希望在DOM准备就绪时执行此操作。

经过几次条件检查后，我们设法指示浏览器在DOM准备好后运行我们的函数这种方式我们的锚元素存在让我们与它的行为进行交互）。

我们的设置函数获得对这个锚点的引用，创建一个函数，当锚点被点击，然后找到一种方法将该函数调用附加到锚的点击事件 - 失去了你的想法呢？这是一段时间JavaScript开发者不得不面对的疯狂。

使用jQuery，这很容易

也许你听说过jQuery，并想知道为什么它如此受欢迎。让我们解决同样的问题，但这次使用jQuery而不是原始的香草JavaScript。假设有以下标记：

 < a id =submithref =enableScripts.html >发表评论< / a> 
  

我们需要的唯一JavaScript（感谢jQuery）就是这样的：

$（$＃$）$ $（$＃$）$（＃submit）。on（click，function（event ）{
event.preventDefault（）;
submitComment（）;
}）;
}）;


就是这样 - 这就是它所需要的。 jQuery处理所有测试以确定给定浏览器执行 或 的最佳方式。它采取所有复杂的东西，并将其移开，以便您可以自由地创意。

How do you I stop my links like this:

<a href="#" onClick="submitComment()">

From jumping to the top of the page after the click?

解决方案

Many times you'll see people use the onclick attribute, and simply return false at the end of it. While this does work reliably, it's a bit ugly and may make your code-base difficult to manage.

<a href="#" onClick="submitComment(); return false;">

Seperate your HTML from your JavaScript

It's far better for you, and your project if you separate your markup from your scripting.

<a id="submit" href="enableScripts.html">Post Comment</a>

With the above HTML, we can find this element and wire up a handler for when the user clicks on the element. We can do all of this from an external .js file so that our HTML remains nice and clean, free from any scripting:

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
    document.attachEvent("onreadystatechange", setup);
} else {
    document.onload = setup;
}

function setup () {
    var submit, submitComment;
    submit = document.getElementById("submit");
    submitComment = function (e) {
        e = e || window.event;
        e.preventDefault();
        alert("You clicked the link!");
    };
    if (submit.addEventListener) {
        submit.addEventListener("click", submitComment, false);
    } else if (submit.attachEvent) {
        submit.attachEvent("onclick", submitComment);
    } else {
        submit["onclick"] = submitComment;
    }
}

There's a lot going on in the above code, but let's run over it from 30,000 feet. We start by figuring out how to best setup our code when the browser loads the page up. Ideally we'd like to do this when the DOM is ready.

After a few conditional checks we manage to instruct the browser to run our function after the DOM is prepared (this way our anchor element exists for us to interact with its behavior).

Our setup function gets a reference to this anchor, creates a function that we'll run when the anchor is clicked, and then finds a way to attach that function call to the click event of the anchor - losing your mind yet? This is the madness JavaScript developers have had to deal with for some time now.

With jQuery, this is much easier

Perhaps you've heard of jQuery, and wondered why it is so popular. Let's solve the same problem, but this time with jQuery rather than raw vanilla JavaScript. Assuming the following markup:

<a id="submit" href="enableScripts.html">Post Comment</a>

The only JavaScript we need (thanks to jQuery) is this:

$(function(){
    $("#submit").on("click", function(event){
        event.preventDefault();
        submitComment();
    });
});

That's it - that is all it takes. jQuery handles all of the tests to determine, given your browser, what the best way is to do this or that. It takes all of the complicated stuff and moves it out of the way so that you are free to be creative.

这篇关于如何停止＃跳转到页首的调用JavaScript函数的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！