xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js multi events overwrite bug

js multi events overwrite bug

demo

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>js multi events overwrite bug</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      margin-top: 50px;
    }
    button {
      width: 100px;
      height: 50px;
      font-size: 23px;
    }
  </style>
  <!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
  <header>
    <h1>js multi events overwrite bug</h1>
  </header>
  <main>
    <article>
      <section>
        <button data-uid="btn1">abc</button>
        <button data-uid="btn2">xyz</button>
      </section>
    </article>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2020</p>
  </footer>
  <!-- js -->
  <script>
    const log = console.log;
    const btn1 = document.querySelector(`[data-uid="btn1"]`);
    const btn2 = document.querySelector(`[data-uid="btn2"]`);
    if(btn1) {
      btn1.addEventListener('click', (e) => {
        log(`btn1`);
        // log(`btn1 =`, e);
        history.pushState({page: 1}, "title 1", "?page=1");
      });
    }
    if(btn1) {
      btn2.addEventListener('click', (e) => {
        log(`btn2`);
        // log(`btn2 =`, e);
        history.pushState({page: 2}, "title 2", "?page=2");
    });
    }
    window.addEventListener('popstate', function (event) {
      log(`✅ event.state =`, event, event.state);
    });
    window.addEventListener('popstate', function (event) {
      log(`✅✅ event.state =`, event, event.state);
    });
    (function(history){
      var pushState = history.pushState;
      history.pushState = function(state) {
        // YOUR CUSTOM HOOK / FUNCTION
        log('called from pushStateHook', state, arguments);
        // func();
        return pushState.apply(history, arguments);
      };
    })(window.history);
  </script>
</body>
</html>





    const log = console.log;
    const btn1 = document.querySelector(`[data-uid="btn1"]`);
    const btn2 = document.querySelector(`[data-uid="btn2"]`);
    if(btn1) {
      btn1.addEventListener('click', (e) => {
        log(`btn1`);
        // log(`btn1 =`, e);
        history.pushState({page: 1}, "title 1", "?page=1");
      });
    }
    if(btn1) {
      btn2.addEventListener('click', (e) => {
        log(`btn2`);
        // log(`btn2 =`, e);
        history.pushState({page: 2}, "title 2", "?page=2");
    });
    }
    window.addEventListener('popstate', function (event) {
      log(`✅ event.state =`, event, event.state);
    });
    window.addEventListener('popstate', function (event) {
      log(`✅✅ event.state =`, event, event.state);
    });
    (function(history){
      var pushState = history.pushState;
      history.pushState = function(state) {
        // YOUR CUSTOM HOOK / FUNCTION
        log('called from pushStateHook', state, arguments);
        // func();
        return pushState.apply(history, arguments);
      };
    })(window.history);

https://cdn.xgqfrms.xyz/HTML5/history-api/url-change-event.html

enhance function

    (function(history){
        var pushState = history.pushState;
        history.pushState = function(state) {
            // YOUR CUSTOM HOOK / FUNCTION
            console.log('called from pushStateHook', state, arguments);
            // func();
            return pushState.apply(history, arguments);
        };
    })(window.history);

History API


window.onpopstate = function(event) {
   console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

refs

https://developer.mozilla.org/en-US/docs/Web/API/History_API

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2021-02-20 23:14  xgqfrms  阅读(82)  评论(4)  编辑  收藏  举报