Hatena::Groupjavascript

JavaScriptで遊ぶよ

 | 

2011-02-10

setCapture

10:50

Firefox 4 で使える setCapture というメソッドがある。IE では昔からあるらしい。

mousedown 中に element.setCapture() とやると、次の mouseup が出るまではその要素で mousemove が発火するらしい。

Firefox 4 beta で試したところ、要素 A の中に要素 B があったとすると、B で mousedown して A に移動した場合は event.target が B のままであるが、A で mousedown して B に移動したら、event.target が B になる。

それから、B で mousedown して layerX または layerY が 0 になる場所より左や上に移動すると、layerX/layerY がマイナスになるわけではなく、祖先要素の layerX/layerY が使われるらしい。(つまり event.target だけが setCapture() に影響を受けて、layerX/layerY は影響を受けない)

Safari では setCapture が無くて Firefox 3.x までと同じ挙動。

Opera は Firefox や Safari とは違い、デフォルトで mousedown された要素(またはその子要素)で mousemove が出るらしい。さらに、offsetX/offsetY がマイナスになることもある。この挙動は理にかなっていると思う。


あとで IE でも試す。

IE8 でやってみたけど、エラーは出さないけど動いてないみたい?

<!DOCTYPE html>
<textarea style="margin:100px; height:300px; width:300px;"></textarea>
<p id="log"></p>
<script>
  document.attachEvent('onmousedown', function(e) {
    e = e || window.event;
    try{
      e.srcElement.setCapture();
    }catch(e){alert(e)}
  });

  document.attachEvent('onmousemove', function(e) {
    e = e || window.event;
    document.getElementById('log').innerHTML = [e.type, e.srcElement, e.offsetX || e.layerX, e.offsetY || e.layerY].toString();
  });
</script>
トラックバック - http://javascript.g.hatena.ne.jp/edvakf/20110210
 |