DOM: ブロック要素のborder のそれぞれの辺(top bottom left right) でそれぞれ別の mouseover イベントを設定したい

太さのある border を持つ、display: block; となる要素(divなど)の、ちょうど border の上をマウスオーバーしたりクリックするなどしたときに、border でイベントが発生したということを検知することはできるでしょうか？

html
1<div id="parent" style="border-top: solid 4px #blue" onmouseover="parentProcess">
2  <div id="child1" onmouseover="childProcess">foo</div>
3  <div id="child2" onmouveover="childProcess">bar</div>
4  <div id="child3" onmouveover="childProcess">baz</div>
5</div>

今現在、親要素#parent のborder に mouseover すると、どの辺なのかに関係なく #parent に設定されたイベント parentProcess が発火しますが、border の各辺にそれぞれ別のイベント処理を設定することはできないでしょうか？
主に私は border-top と border-bottom が mouseover された時の処理を特別にしたいのですが。

それが不可能であるなら、htmlの構造は変更して、（ユーザからの）見た目は元のhtmlと同じで疑似的に border を作成して実現する方法はないでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

地道に計算すれば出ます。

JavaScript
1const parent = document.getElementById('parent');
2parent.addEventListener('click', function(event) {
3  const computedStyle = getComputedStyle(parent, null);
4  const borderTopWidth = parseInt(computedStyle.borderTopWidth, 10);
5  const borderBottomWidth = parseInt(computedStyle.borderBottomWidth, 10);
6
7  const rect = parent.getBoundingClientRect();
8  const viewY = event.pageY - pageYOffset;
9  if (viewY < rect.top + borderTopWidth) {
10    console.log('border-top');
11  } else if (viewY >= rect.bottom - borderBottomWidth) {
12    console.log('border-bottom');
13  }
14
15  return true;
16}, false);