[JavaScript] onmousemoveで子要素にバブリングさせない方法はありますか？

Question

前提

<div>内にオンマウスでJavaScriptのonmousemoveでイベント発火とマウス座標を取得、<div>の子要素<span>がマウス位置を追随（マウス位置と重なる）、……というところまでは出来ました。

発生している問題

<div>内であっても、子要素の<span>にマウスが入る＝<div>から出た、となって、マウスを動かすたびに<span>が初期位置に戻ったり戻らなかったりする。

実現したいこと

追随させたいのでonmouseenterではダメで、<span>がマウスと重なる位置に来る、というところも外せないです。

mouseover → onmouseenter、mouseout → mouseleave のように、onmousemoveで子要素にバブリングさせない方法はありますか？
または同様のことを実現可能な他の手法はありますか？

該当のソースコード

// なるべく旧ブラウザにも対応の書き方。
// htmlは<div class='DIVs'><span>＊</span></div>

var DIVs = document.querySelectorAll('.DIVs');
// 同ページ内に複数あるのでfor
for (var i = 0; i < DIVs.length; i++) {
  DIVs[i].onmousemove = function(event){
    this.children[0].style.top = event.offsetY -10 + 'px';
    this.children[0].style.left = event.offsetX -10 + 'px';
  }
  // <div>からマウスが外れたら<span>は元の位置へ
  DIVs[i].onmouseleave = function(){
    this.children[0].style.top = '0';
    this.children[0].style.left = '0';
  }
};

Answer 1

<span>を背面に移動させたらどうでしょう。

.DIVs span {
  
  position: absolute;
  z-index: -1;
}

---

マウスイベントを無効にした方がいいかな。

.DIVs span {
 
  position: absolute;
  pointer-events: none;
}

---

CSSの設定で回避できましたが、
jsだけでなぜうまくいかないのか、気になったので調べてみました。
イベントのバブリングは、この場合、原因ではないような気がしたので。

原因は、下記に記述のある座標値の原点の問題だと思います。

event.offsetX,Yの罠...どこが原点の座標値なのかを理解する (currentTargetとtarget) - Qiita

この場合，event.offsetX，Yで取得される座標値は，そのイベントハンドラが付与されている要素(boxA)の左上を原点としたものではなく，マウスが載っている要素(boxB)の左上を原点とした座標値になります．

上記には、座標値の変換方法の記載もありますが、かなり面倒なので、CSSで回避するほうがシンプルですね。

Comments

[NieeeR]

なるほど、CSSのほうに解決策があったのですね。

<span>のCSSに{pointer-events:none}で解決しました、ありがとうございます！
ならばついでにと、バブリング避けでonmouseleaveにしてた部分もonmouseoutにしてより旧ブラウザ対応をカバー出来て一石二鳥の感謝です。

<div>にも<span>にも背景色付ける予定だったので今回は下敷きは見送りましたが、透明な要素のケースでの技の引き出しとして{z-index:-1}もとても参考になりました。

[NieeeR]

---
確かに。マウス外れて初期位置に戻すとこはonmouseleaveにしたんだから、そこはバブリングしませんもんね。

試しにmouseleave（out）で初期位置に戻る部分とpointer-eventsを両方消すと、<div>から外れても初期位置に戻らないのに<span>に重なると初期位置に戻ろうとしました。
（厳密には<span>に乗って戻りかけて、<span>が外れて<div>に直乗りになるとまたマウスに寄ってくる、というウロウロした挙動）

onmousemoveはバブリングするとの仕様ですが、子要素に乗ると子要素からの座標になってしまうというのが『取得される座標がバブリングしてる』ということでしょうかね……。

[NieeeR]

<span>に重なると初期位置に戻ろうと
→初期位置というか、子要素からの座標だと座標値がより初期位置に近い計算になるので、初期位置に戻るのに似た方向へ動く、ということですね。