overflow-xを使って特定の要素からmouseEventのoffsetXを特定する：

Question

私はoverflow-x：autoという要素を持っていますが、この要素の中をクリックして左のオフセットを（pxで）要素の左端。問題は、この要素には他のいくつかの要素が含まれているため、MouseEventに生のoffsetXプロパティを使用するだけでは、入れ子になったdivの1つを誤ってクリックした場合と同じように、その内側のdivのエッジではなく、私がターゲットにしたい要素です。

また、MouseEvent.clientX - element.offsetLeftを使用することはできません。あたかも要素にスクロールされているかのように、現在隠されているスクロールされた過去の部分の値を返しません。私の要素。

どのようにすることができます： 1 - マウスイベントのX posと私の要素の左のパディングエッジの間の距離を決定しますか？

OR

2 - 何とかたMouseEventのターゲットを指定するための回避策を作成します（これは読み取り専用のプロパティですので、これも可能である場合、私はわからないんですか）？

私はTypescriptとAngular4を使用していますが、jQueryを使用したくないので、jQueryベースのソリューションを提案しないでください。ありがとう！

ありがとうございました。

Answer 1

EDIT これはまた、溶液を考え出したコンテナ要素

---

にHTML DOMプロパティscrollLeftを使用して行うことができます。

我々はそうのような条件を追加することにより、offsetXプロパティは、当社のコンテナ要素に関するものである場合にのみ、マウスの移動ロジックを実行することを確認することができます

if (mouseMoveEvent.clientX - myElement.offsetLeft) <= mouseMoveEvent.offsetX) { 
    // Handle mousemove 
} 
else { 
    // Do nothing 
} 

このオーバーフロー-xの場合：自動要素mouseMoveEvent.offsetXは、（mouseMoveEvent.clientX - this.element.offsetLeft）以上でなければなりません。

したがって、そうでない場合は、mouseMoveEvent.offsetXプロパティが内部要素を対象としていることを意味し、その場合はロジックをスキップできます。