7cc@はてなブログ

JavaScriptとかとか

デバッグ時だけconsole出力したい

JavaScript 
var debug = true
if ( !window.console || !Function.bind ) {
  debug = false
}
var cl = debug?
  Function.prototype.bind.call(console.log, console) : function(){}

usage

cl(1, 2)

console.log.applyだと出力箇所が関数定義場所になってしまうのでbindを使う。

あるいは単純にdebug && console.log()でも良いと思う。

document.activeElement

JavaScript 互換性

概要

focusのある要素を返す。

  • 基本的にformの部品が対象
  • 他には<a>, <area>, <detail>, tabindex属性付き要素など、フォーカス可能な要素も返す
  • iframe内の要素にフォーカスがある時は、そのiframeが返る

仕様はここ。8 User interaction — HTML Standard.htm 8.4.2 Focus management

子要素があっても、activeElementはフォーカス可能な要素になる。
こういうhtmlのspanをクリックすると、

<p tabindex="0"><span>span</span></p>

event.target // span
document.activeElement // p

という具合になる。

フォームの部品以外の互換性

要素をクリックしたときのdocument.activeElementが、その要素になるか

要素 Chrome Firefox IE
a ☓*1 ○ ○
area ○ ☓*1 ○
tabindex ○ ○ ○

*1 tabキーや、element.focus()でフォーカスを移動している時は返す。そうでなければbodyになる

スクリプトでelement.focus()すれば同じ結果が得られる。
しかしChromeではフォーカスがあると水色の枠線で囲まれて若干気持ち悪い。

Chrome以外なら、document.activeElementを見ればリンクがクリックされたと分かる。

デモ

http://jsbin.com/fihop/4

IEとdocument.activeElement

次の要素もclickでactiveElementになる

  • width等のCSSが指定されているdiv
  • fieldset
  • たぶん他にもいろいろ・・・

つまり最初に書いた通り、formの部品以外では注意が要る。

ownerDocument, document

JavaScript

createElementでつくった要素

var div = document.createElement("div")
div.ownerDocument === document // true

ownerDocumentは文書中に要素があるかは関係ない。

xhrで得た要素

var xhr = new XMLHttpRequest
xhr.open("GET", document.URL)
xhr.responseType = "document"
xhr.onload = function(e){
  var doc = e.target.response
    , a =doc.getElementsByTagName("a")[0]
  console.log(
    a.ownerDocument === document // false
  )
  document.body.appendChild(p)
  console.log(
    a.ownerDocument === document // true
  )
}
xhr.send(null)

親ノードになるドキュメント次第で変わる。

いつ使うのか

複数のwindowがある場合。例えば、<iframe>。

Google ChromeのCSSOMは相変わらず間違っている

JavaScript CSS 位置-サイズ

追記

ver. 33.0.1750.117 m でCSSOMの実装が以前のバージョンに戻った。今は下記のエラーは表示されない

しかしこの実装は間違っているので、将来的には変更があると思われる。

以下は追記以前の情報

続きを読む