Javascript 代码阻止所有 <a href> 链接的默认设置答案

【问题标题】：Javascript code to preventDefault for all <a href> linksJavascript 代码阻止所有 <a href> 链接的默认设置
【发布时间】：2014-07-18 00:29:41
【问题描述】：

我正在尝试通过 AJAX 更新内容来仅使用 Javascript 来更改 URL。

这是为了防止某些内容（即音乐、聊天消息框等）刷新，并且

清除播放音乐的地方
重置您正在处理的内容，例如输入消息。

我今天才开始尝试实现这样的东西，到目前为止我已经得到了这个：

var a = document.querySelectorAll('a')
for (var i=0; i<a.length; i++) {
   a[i].addEventListener('click',function(event){event.preventDefault();};
}
return false

但是，这段代码

不允许更改网址
不加载 AJAX。

我的问题是：如何取消刷新的年龄，但仍然允许更改 url？

【问题讨论】：

getElementsByTagName 比 querySelectorAll 快。并避免循环内的内联函数，在每次迭代时创建一个重复的函数。

标签： javascript ajax preventdefault

【解决方案1】：

试试类似的东西

var a = document.getElementsByTagName('a'),
    ajax;
for (var i=0; i<a.length; ++i) {
   a[i].addEventListener('click', handleAnchor, false);
}
function handleAnchor(e){
    e.preventDefault();
    if(ajax) ajax.abort();
    ajax = new XMLHttpRequest();
    ajax.onload = updateContent;
    ajax.open("get", this.href, true);
    ajax.send();
}
function updateContent() {
    // Do something with `this.responseText`
}

【讨论】：

这段代码完全符合预期！但是，我将如何更改 URL（无需重新加载，哈哈）以及管理前进和后退按钮（全部使用 javascript）？在此先感谢:)
@TimPowell 要做到这一点，请使用History API

【解决方案2】：

您可以尝试基于哈希的 url 方案：

someurl/#param1

someurl/#param2

...

【讨论】：

【解决方案3】：

var anchors = document.getElementsByTagName('a');

for(var i=0; i < anchors.length; i++) {
    addEvent(anchors[i], 'click', preventDefault);
}

function preventDefault(e) {
    e = e || window.event;
   (e.preventDefault)? 
       e.preventDefault() : e.returnValue = false;
}

function addEvent(obj, evType, fn){ 
   if (obj.addEventListener){ 
       obj.addEventListener(evType, fn, false); 
       return true; 
   } 
   else if (obj.attachEvent){ 
       var r = obj.attachEvent("on"+evType, fn); 
       return r; 
 } else { 
       return false; 
 } 
}

试一试在prevent default for all links inside a div using jquery找到这个

【讨论】：

【解决方案4】：

尝试（这种模式），利用 jquery .load()

html

<div class="1">content 1</div><div class="2">content 2</div>
<a class="1" href="#">update 1</a>
<a class="2" href="#">update 2</a>

js

$(function() {
var url = "http://example.org";
    $("a").each(function(i, el) {
        $(this).on("click", function(e) {
          e.preventDefault();
            if (i === 0) {
              $("div.1")
              .load(url + " #" + $(el).attr("class"));
             };
            if (i === 1) {
              $("div.2")
              .load(url + " #" + $(el).attr("class"));
            };
        })
    });
});

jsfiddle http://jsfiddle.net/guest271314/dL4b4/

【讨论】：

【解决方案5】：

请尝试

 $("a[href=#]").click(function (e) {
    e.preventDefault();
 })

【讨论】：