Question

$(function(){
    $('.button').click(function(e){
        e.preventDefault();  
        history.pushState({url: 'index.html'},'','page1.html');
    });
});
$(window).bind('popstate', function(e){
    console.log(e.originalEvent);
});

删除e.preventDefault()后，哈希标记会显示在localhost/page1.html#之后，但添加e.preventDefault()后，e.originalEvent.state将显示为null

<a href="#" class="button">Click me</a>

有什么问题？我该如何解决？

编辑：

按下按钮时，地址栏会更新（这很好）。但是，当我点击后退按钮时，状态对象显示为null（它假设显示{url：'index.html'}）

Answer 1

您所看到的不是错误，而是预期的行为。

首次加载页面时，状态为/，状态对象为空。当您使用preventDefault单击锚标记时，状态将更改为/page1.html并被赋予一个要存储的对象。现在，当你按下后退按钮时，popstate事件发生在状态变回/后，它没有状态对象！

要演示，请点击链接3-4次。现在，每次回击时，originalEvent.state都会有一个对象，直到你回到/，这当然没有状态对象。

要使默认状态具有状态对象而不是null，请使用replaceState。

$(function(){
    $('a').click(function(e){
        e.preventDefault();  
        history.pushState({url: 'index.html'},'','page1.html');
    });
});
$(window).bind('popstate', function(e){
    console.log(e.originalEvent);
});
// give the current state a state object
history.replaceState({url: 'index.html'},'','');

http://jsfiddle.net/Kd3vw/6/

事件阻止默认不起作用

1 个答案: