首頁 > 其他

activeElement在safari與chrome總是返回body？

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

現在都支援document.activeElement屬性 ，但是在safari與chrome出現了些狀況……到stackoverflow查了一下，但給出的方法並不靠譜，因為click事件總是趕在focus事件前發生。

//http://stackoverflow.com/questions/483741/how-to-determine-which-html-page-element-has-focusfunction _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，但同樣太慢了，幫不上忙。

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

運行代碼

注意，我的目的是想擷取當前啟用元素，並不是想得到當前的點擊的元素……

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

運行代碼

記得我以前好像在背光部落格見過這種機制的解析，但此部落格在河蟹浪潮中覆滅了……

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More