マウスオーバーしたときと、クリックされたとき、それぞれのマウスの位置を取得します。
以下の正方形にマウスを合わせてください。
スマホではタップした時がトリガーになります。
マウスの位置
クリックされた位置
JSは以下
//ボタンの定義 const btn = document.getElementById('demo_btn'); //出力場所の定義 const output1 = document.getElementById('demo_area1'); const output2 = document.getElementById('demo_area2'); //ボタンエリアの座標を取得 btnRect = btn.getBoundingClientRect(); //マウスのホバー時に位置を取得 function get_move(event) { x = event.x - btnRect.left; y = event.y - btnRect.top; output1.innerHTML=`x : ${x} y : ${y}`; } btn.addEventListener('mousemove', get_move); //マウスのクリック時に位置を取得 function get_click(event) { x = event.x - btnRect.left; y = event.y - btnRect.top; output2.innerHTML=`x : ${x} y : ${y}`; } btn.addEventListener('click', get_click);
CSS
#demo_btn{ border: solid 1px #999; height: 120px; width: 120px; display: grid; grid-template-rows: repeat(3,40px); grid-template-columns: repeat(3,40px); } .demo_hover { border: 1px solid #000; box-sizing: border-box; user-select: none; } .demo_hover:hover { background: #00f; } .demo_hover:active { background: #f00; } #demo_area1,#demo_area2{ height: 20px; line-height: 20px; }
HTMLは以下になります
<div id="demo_btn"> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> <div class="demo_hover"></div> </div> <p class=down >マウスの位置</p> <div id="demo_area1"></div> <p class=down >クリックされた位置</p> <div id="demo_area2"></div>