JS クリックイベント時にドラッグしている要素を取得する方法

Question

●やりたいこと
クリックイベント発生時にドラッグしている要素のタグをを取得したいのですがどのようにすれば取得できるかご存知の方教えていただきたいです

例
テストpタグ部分をドラッグした状態で、buttonクリックしたらpタグの要素を取得したい（タグが取れるようにしたいです。）

●試したこと＆コード

const button = document.querySelector("button");

button.addEventListener("click", () => {
  document.addEventListener(
    "drag",
    function () {
　　/* 発火せず */
      console.log("1");
    },
    false
  );
});

html

<p>テスト</p>
<button>ボタン</button>

Comments

[ponpon00]

<h1>テスト</h1>
<h2>テスト1</h2>
<p>テスト2</p>
のように複数あるなかで、ドラッグした特定のみ取得したいです

[int32_t]

「ドラッグ」をどういう意味で使ってますか?
ドラッグした状態でクリック、というのはマウスポインタが1つだけでは不可能に思えますが。

[ponpon00]

わかりづらくてすいません。
文字部分をドラックし、選択した状態のこと意味しています。

[int32_t]

「ドラッグ」というのは、マウスのボタンを押している間にマウスカーソルを動かす操作のことです。

この質問は「ボタンがクリックされたときにテキスト選択を含んでいる要素を取得したい」ということですね。
テキスト選択の始点と終点が別々の要素のときはどうしたいですか?

[ponpon00]

そうなんですね。ありがとうございます。

選択した要素のタグがaタグであるかを判別して処理を変更したいために要素を取得したいです
>テキスト選択の始点と終点が別々の要素のときはどうしたいですか?
選択した要素が別々でもそこにaタグが含まれていたら、たとえ他のタグが含まれていてもaタグであるという判断し処理をしたいです。

Answer 1

window.getSelection() で取得できる Selection インタフェイスからテキスト選択の情報を得ることができます。anchorNode anchorOffset focusNode focusOffset から目的の要素が入っているかどうかを判定しましょう。

Comments

[ponpon00]

試してみたのですがどの部分でタグを判定するのかわからず..どのようにすればタグ部分が取得できるかご教授いただけますでしょうか。。

[int32_t]

たとえば、

let e = s.anchorNode.nodeType == Node.ELEMENT_NODE ? s.anchorNode : s.anchorNode.parentElement;
if (e.closest('a')) {
// <a> の中
}

こんな感じで s.anchorNode が <a> の中かどうか判定できます。

[ponpon00]

期待通りに処理をできるようになりました。
迅速にご丁寧に対応いただきありがとうございました。