activeElement在safari与chrome总是返回body？

最新推荐文章于 2023-12-26 11:34:05 发布

weixin_34026276

最新推荐文章于 2023-12-26 11:34:05 发布

阅读量335

点赞数

文章标签： javascript ViewUI

现在都支持document.activeElement属性，但是在safari与chrome出现了些状况……到stackoverflow查了一下，但给出的方法并不靠谱，因为click事件总是赶在focus事件前发生。


//http://stackoverflow.com/questions/483741/how-to-determine-which-html-page-element-has-focus
function _dom_trackActiveElement(evt) {
    if (evt && evt.target) { 
        document.activeElement = evt.target == document ? null : evt.target;
    }
}

function _dom_trackActiveElementLost(evt) { 
    document.activeElement = null;
}

if (!document.activeElement) {
    document.addEventListener("focus",_dom_trackActiveElement,true);
    document.addEventListener("blur",_dom_trackActiveElementLost,true);
}

在标准浏览器支持一个叫DOMActivate，但同样太慢了，帮不上忙。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>activeElement by 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var safari=/a/.__proto__=='//'; //http://www.quirksmode.org/js/detect.html var chrome= navigator.userAgent.indexOf("Chrome") !== -1; var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); function getActiveElement(e) { var m = document.activeElement; alert(m) } var inputs = document.getElementsByTagName("input"); for(var i=0,n=inputs.length;i<n;i++){ addEvent(inputs[i],"click",getActiveElement) } } </script> </head> <body> <form action="#"> <input type="checkbox" name="team" value="team" checked>Spurs<br> <input type="checkbox" name="team" value="pacers">Pacers<br> <input type="checkbox" name="team" value="kings" >Kings<br> <input type="checkbox" name="team" value="other">Other <p> <input type="button" id="aa" value="按扭1" > </p> <p> <input type="button" id="bb" value="按扭2" > </p> <p> <input type="button" id="cc" value="按扭3" > </p> </form> </body> </html>

运行代码

注意，我的目的是想获取当前激活元素，并不是想得到当前的点击的元素……

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>activeElement by 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var safari=/a/.__proto__=='//'; //http://www.quirksmode.org/js/detect.html var chrome= navigator.userAgent.indexOf("Chrome") !== -1; var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); function getActiveElement(e) { var m; if(safari || chrome){ m = e.target == document ? null : e.target; }else{ m = document.activeElement; } alert(m) } var inputs = document.getElementsByTagName("input"); for(var i=0,n=inputs.length;i<n;i++){ addEvent(inputs[i],"click",getActiveElement) } } </script> </head> <body> <form action="#"> <input type="checkbox" name="team" value="team" checked>Spurs<br> <input type="checkbox" name="team" value="pacers">Pacers<br> <input type="checkbox" name="team" value="kings" >Kings<br> <input type="checkbox" name="team" value="other">Other <p> <input type="button" id="aa" value="按扭1" > </p> <p> <input type="button" id="bb" value="按扭2" > </p> <p> <input type="button" id="cc" value="按扭3" > </p> </form> </body> </html>

运行代码

记得我以前好像在背光博客见过这种机制的解析，但此博客在河蟹浪潮中覆灭了……

weixin_34026276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
activeElement在safari与chrome总是返回body？

现在都支持document.activeElement属性，但是在safari与chrome出现了些状况……到stackoverflow查了一下，但给出的方法并不靠谱，因为click事件总是赶在focus事件前发生。//http://stackoverflow.com/questions/483741/how-to-determine-which-html-page-element-ha...
复制链接

扫一扫