JavaScript CSS 要素内のマウス位置 詳しい方教えて下さい

Question

前提・実現したいこと

要素内をonmousmoveしたときに
マウスが↑の位置にあるか↓の位置にあるか判別する方法教えてください

divをheight:30%で作成
マウスがその要素の真ん中(50%)より上であるか下であるか判定したいです

Answer 1

onmousemoveイベントで要素の左上を原点とする座標x y、要素の幅と高さ width height を取得する例です。

<div id="xxx">xxx</div>
<script>
  var element = document.getElementById("xxx");
  element.onmousemove = function(event){
    var x = event.offsetX;
    var y = event.offsetY;
    var width = element.offsetWidth;
    var height = element.offsetHeight;
  };
</script>

Comments

[退会済みユーザー]

返信ありがとうございます
要素内のマウス座標取得はわかるんですがそこから高さを算出して半分の位置より上か下かを判定したいです
わかりましたらお願いいたします

[itagagaki]

え？そんなの y が height / 2 より大きいか小さいかでは？

[退会済みユーザー]

<style>
body,html{
height:100%;
}
</style>

<div id="xxx" style="height:30%;background:yellow">xxx</div>
<script>
var element = document.getElementById("xxx");
element.onmousemove = function(event){
var x = event.offsetX;
var y = event.offsetY;
var width = element.offsetWidth;
var height = element.offsetHeight;
xxx.innerHTML=x+" "+y;
};
</script>

[退会済みユーザー]

なぜか動かないのでなぜかわかったらご指摘下さい

<style>
body,html{
height:100%;
}
</style>

<div id="xxx" style="height:30%;background:yellow">xxx</div>
<script>
var element = document.getElementById("xxx");
element.onmousemove = function(event){
var x = event.offsetX;
var y = event.offsetY;
var width = element.offsetWidth;
var height = element.offsetHeight;
yy=height/2;
xxx.innerHTML=x+" "+y;
if(y>yy){
alert("↑);
}else{
alert("↓");
}
}
};
</script>

[itagagaki]

> xxx.innerHTML=x+" "+y;
xxxという変数は存在していないので、やるとすれば
element.innerHTML=x+" "+y;
ですかね。

> alert("↑);
" が閉じていません。

> }
1個多いです。