47 lines
1.6 KiB
HTML
47 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>probe</title></head>
|
||
|
|
<body>
|
||
|
|
<div id="out"></div>
|
||
|
|
<button id="b" data-act="TEST">点我</button>
|
||
|
|
<script>
|
||
|
|
var L=[];
|
||
|
|
function log(s){ L.push(s); document.getElementById('out').textContent=L.join('\n'); }
|
||
|
|
|
||
|
|
log('loadHash=['+location.hash+']');
|
||
|
|
|
||
|
|
/* ① 直接写 location.hash */
|
||
|
|
var h1=location.hash;
|
||
|
|
location.hash='#/p/p2/ok';
|
||
|
|
log('① 直接赋值: before=['+h1+'] after=['+location.hash+']');
|
||
|
|
|
||
|
|
/* ② history.replaceState */
|
||
|
|
var rs='ok';
|
||
|
|
try{ history.replaceState(null,'','#/p/p9/ok'); }catch(e){ rs='throw:'+(e&&e.name)+'/'+e.message; }
|
||
|
|
log('② replaceState='+rs+' hashNow=['+location.hash+']');
|
||
|
|
|
||
|
|
/* ③ history.pushState */
|
||
|
|
var ps='ok';
|
||
|
|
try{ history.pushState(null,'','#/p/p7/ok'); }catch(e){ ps='throw:'+(e&&e.name); }
|
||
|
|
log('③ pushState='+ps+' hashNow=['+location.hash+']');
|
||
|
|
|
||
|
|
/* ④ document 级委托 click + 合成事件 */
|
||
|
|
var fired=[];
|
||
|
|
document.addEventListener('click', function(ev){
|
||
|
|
var t=ev.target.closest('[data-act]');
|
||
|
|
if(!t) { fired.push('no-data-act'); return; }
|
||
|
|
fired.push('handled:'+t.dataset.act);
|
||
|
|
location.hash='#/p/p3/ok';
|
||
|
|
});
|
||
|
|
var b=document.getElementById('b');
|
||
|
|
b.dispatchEvent(new MouseEvent('click',{bubbles:true}));
|
||
|
|
log('④ 合成点击: fired=['+fired.join(',')+'] hash=['+location.hash+']');
|
||
|
|
|
||
|
|
/* ⑤ 原生 click() 方法 */
|
||
|
|
var fired2=[];
|
||
|
|
document.addEventListener('click', function(ev){ if(ev.target.id==='b') fired2.push('native-click-ok'); });
|
||
|
|
b.click();
|
||
|
|
log('⑤ el.click(): fired=['+fired2.join(',')+'] hash=['+location.hash+']');
|
||
|
|
|
||
|
|
log('finalHash=['+location.hash+'] stylesheets='+document.styleSheets.length);
|
||
|
|
</script>
|
||
|
|
</body></html>
|