Question

我在下面有一个示例代码，如果单击链接，然后使用后退和前进，每个状态更改将导致'statechange'事件上的命中越来越多。而不是我期望的那个。

链接：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>History start</title>
</head>
<body>
    <h1>Headline</h1>
    <hr>
    <div id="menu">
        <ul>
            <li>
                <a href="page-1">Page 1</a>
                <div style="display:none;">
                    <h2>Page 1</h2>
                    <p>Content 1</p>
                </div>
            </li>
            <li>
                <a href="page-2">Page 2</a>
                <div style="display:none;">
                    <h2>Page 2</h2>
                    <p>Content 2</p>
                </div>
            </li>
        </ul>
    </div>
    <hr>
    <div id="content">
        <h2>Start page</h2>
        <p>Paragraf</p>
    </div>
    <script src="external/jquery-1.6.2.min.js"></script>
    <script>if ( typeof window.JSON === 'undefined' ) { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script>
    <script src="external/history.adapter.jquery.js"></script>
    <script src="external/history.js"></script>
    <script>
    $(document).ready(function() {
        History.enabled = true;

        $('a').each(function() {
            $(this).click(function(e) {
                e.preventDefault();
                var $link = $(e.target),
                    state = {'href': $link.attr('href'), 'title': $link.html()},
                    $div = $link.siblings('div'),
                    content = $div.html();

                $('#content').html(content);

                History.pushState(state, state.title, state.href);

                return false;
            });
        });

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            // remove double hit on event
            console.log(State);

        });

    });
    </script>
</body>
</html>

Answer 1

这是因为你在加载页面时调用了pushState函数，这也会导致状态改变。我处于类似的情况，并在我的pushStates之前使用了一个布尔值，所以我知道我正在做一个pushState。它看起来像这样......

historyBool = true;
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate

var State = History.getState(); // Note: We are using History.getState() instead of event.state

    //don't run our function when we do a pushState
    if(historyBool){
        historyBool = false;
        tempFunction = new Function(State.data.ajaxRunFunction);
        tempFunction();
    }
    historyBool = true;
});

historyBool = false;
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"};
History.pushState(historySet,"","");

Answer 2

虽然与您的具体问题无关，但我有一个场景需要从历史记录适配器解除绑定事件处理程序。为此，您可以从窗口取消绑定“statechange”事件，这是当您调用History.Adapter.bind（）时History.Adapter绑定的内容：

$(window).unbind('statechange.namespace');

您可以为事件添加命名空间，以避免解除与上述其他无关事件处理程序的绑定，或使用命名函数专门取消绑定该函数。要使用上述命名空间，您需要使用相同的命名空间绑定处理程序，即

History.Adapter.bind(window,'statechange.namespace',function(){...}

如何使用history.js捕获状态更改事件ONCE？

2 个答案: