javascript - How does NetEase Cloud Music realize that the a tag href has a value and does not jump?

Question

For example, this page http://music.163.com/#/song?i...
Click on the song title below, the page does not refresh or jump, how to achieve this.

Answer 1

http://music.163.com/#/song?i...
#The thing after the number is called a fragment, or it can also be called an anchor point. This thing will not refresh the browser, nor will it submit a request to the server, but it can generate a browser record.
Get the value after the # number is window.location.hash
So you only need to monitor the change of this hash value onhashchange

Answer 2

window.location.hash

Answer 3

iframe

Answer 4

I guess you are a newbie... Take a look at the source code

_onAnchorClick = function(_event){//截获所有<a>标签的点击事件，自定义页面的跳转
    _event = _event||window.event;
    var _el = _event.target||_event.srcElement,
    _base = location.protocol+'//'+location.host;
    
    while(_el&&_el!=document){
        // ...
    }

}

_addEvent(document,'click',_onAnchorClick);

---

In fact, I just used Event.preventDefault

  <a href="https://baidu.com">我想跳转到百度搜索哆啦A梦</a>


  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script>
    
    $('a').on('click', function (event) {
      event.preventDefault();
    })
  
  </script>

Answer 5

The page is actually not refreshed. You know "#target", which can jump your page to the target location. This is actually similar to this. Further, you can learn about js hash (mentioned above) and routing