event.currentTarget和document.activeElement用法

本文探讨了在浏览器兼容代码中常被误用的event.currentTarget与document.activeElement的区别。通过实例对比,解释了两者分别用于识别事件触发的DOM元素与获取当前焦点对象的不同。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。 大家在google搜索的时候 都会发现 document.activeElement || event.currentTarget 的用法。 
其实这样的用法是错误的,因为这两个属性的意义都不一样。 
event.currentTarget 
Identifies the current target for the event, as the event traverses the DOM. 
识别当前事件触发的dom 
document.activeElement 
Gets the object that has the focus when the parent document has focus. 
获得当前focus的对象 
例子 <script type="text/javascript"> 
var show = function (e) { 
alert(e.currentTarget?"获取到了 currentTarget":"获取到了 document.activeElement") 
alert((e.currentTarget || document.activeElement).tagName); 
}; 
</script><BR> 案例1: <br/><BR> <a href="#"><img src="http://www.google.cn/images/nav_logo3.png" border="0" alt="" onclick="show(event)"/></a> <br/> <br/><BR> 案例2: <br/><BR> <a href="#" onclick="show(event)"><img src="http://www.google.cn/images/nav_logo3.png" border="0" alt=""/></a> <br/><P></P> 
<P> 这两个案例,在ie和firefox下试验一下。</P> 
最后测试补充:后来测试了一下 document.activeElement 的支持程度,发现四大浏览器safari除外, ie firefoxopera都提供了这个对象的支持。但是有点需要注意的,上面的例子中 opera 会把图片作为 可以 focus的对象。导致document.activeElement的结果不一致...
<script> // 关闭页面清除session // 判断关闭页面之后与再次点开页面得时间,刷新操作时间间隔在20ms,>2000ms时说明是非刷新操作 // 2000ms是通过关闭页面到点击历史纪录进入页面间隔得大概最短时间 var loadTime = function () { _load_time = new Date().getTime(); unload_time = sessionStorage.getItem('unload_time'); sessionStorage.setItem('_load_time', _load_time); sessionStorage.setItem('nowload', _load_time - unload_time); const gap = _load_time - unload_time; if (gap > 2000) { sessionStorage.clear(); localStorage.clear(); // 使用 fetch 发送登出请求 fetch('/logout', { method: 'POST', // 根据实际情况调整请求方法 headers: { 'Content-Type': 'application/json' // 根据实际情况调整请求头 }, }) .then(response => { }) } }; loadTime(); </script> <script> let _beforeUnload_time = 0, _gap_time = 0, _load_time = 0, unload_time = 0; window.onunload = function () { unload_time = new Date().getTime(); sessionStorage.setItem('unload_time', unload_time); }; const globalState = JSON.parse(window.localStorage.getItem("geeker-global")); if (globalState) { const dot = document.querySelectorAll(".dot i"); const html = document.querySelector("html"); dot.forEach(item => (item.style.background = globalState.primary)); if (globalState.isDark) html.style.background = "#141414"; } </script> 当我复制当前窗口地址并在另一个窗口粘贴打开时,原来的窗口执行 localStorage.clear(); navigator.sendBeacon('/logout');,怎么实现打开新窗口不影响原窗口
最新发布
03-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值