JavaScriptで同じ要素に対する「mousedown」「mouseup」と「click」のイベントリスナにそれぞれ別の処理を実施したい

JavaScriptで同じ要素に対する「mousedown」「mouseup」と「click」のイベントリスナにそれぞれ別の処理を実施したいです。
preventDefault()やstopImmediatePropagation()ではイベントの伝藩を止められませんでした。

もし方法があるのであれば、ご教授いただきたいです。

失礼いたしました。追記になります。

下記ソースコードです。
やりたいことは、要素をドラッグする場合はクリックイベントを発生させず、ドラッグをしない（要素自体をmousedown/mouseupしない＝ドラッグしない）場合は、アラートを出したいです。
removeEventlistenerを使って試してみましたが、再登録がうまくできず、一度ドラッグしてしまうと、アラート(clickイベント)が発生しなくなってしまいました。

html
1    <div class="drag-and-drop" id="red-box"></div>
2    <div class="drag-and-drop" id="blue-box"></div>
3    <div class="drag-and-drop" id="yellow-box"></div>

js
1const body = document.querySelector("body");
2body.addEventListener("click", hoge);
3function hoge(e) {
4    alert("click");
5}
6
7
8{
9    var elements = document.getElementsByClassName("drag-and-drop");
10    console.log(elements);
11    var x;
12    var y;
13    var elem;
14
15    for (var i = 0; i < elements.length; i++) {
16        elements[i].addEventListener("mousedown", (e) => {
17           // body.removeEventListener("click", hoge);
18            e.stopImmediatePropagation();
19            e.preventDefault();
20            elem = e.target;
21            elem.classList.add("drag");
22
23            if (e.type === "mousedown") {
24                // var event = event;
25            } else {
26                console.log(e.changedTouches[0]);
27                var e = e.changedTouches[0];
28            }
29
30            //要素内の相対座標を取得
31            console.log(elem.offsetLeft);
32            console.log(elem.offsetX);
33            console.log(e.pageX);
34            x = e.pageX - elem.offsetLeft;
35            console.log(x);
36            y = e.pageY - elem.offsetTop;
37            document.body.addEventListener("mousemove", mmove, false);
38
39            e.stopImmediatePropagation();
40            e.preventDefault();
41        });
42    }
43
44    function mmove(e) {
45
46        var drag = document.getElementsByClassName("drag")[0];
47        if (e.type === "mousemove") {
48            var event = e;
49        } else {
50            var event = e.changedTouches[0];
51        }
52        e.preventDefault();
53
54        drag.style.top = event.pageY - y + "px";
55        drag.style.left = event.pageX - x + "px";
56
57        drag.addEventListener("mouseup", mup, false);
58        document.body.addEventListener("mouseleave", mup, false);
59        drag.addEventListener("touchend", mup, false);
60        document.body.addEventListener("touchleave", mup, false);
61
62    }
63
64    function mup(e) {
65
66        var drag = document.getElementsByClassName("drag")[0];
67
68        document.body.removeEventListener("mousemove", mmove, false);
69        drag.removeEventListener("mouseup", mup, false);
70        document.body.removeEventListener("touchmove", mmove, false);
71        drag.removeEventListener("touchend", mup, false);
72
73        drag.classList.remove("drag");
74    }
75    body.addEventListener("click", hoge);
76}

think49

2022/06/25 09:35 編集

mousedown,mouseup,clickイベントは各々で独立して動作するので、`addEventListener` で3つのイベントを同時指定は可能です。質問文に「問題が再現されるコード」「コードを元にした問題点」を追記してください。 https://ja.stackoverflow.com/help/minimal-reproducible-example

think49

2022/06/25 09:42 編集

preventDefault()やstopImmediatePropagation()で停止るのは、実行したイベントに対してのみで他イベントには影響しません。実行中のイベントではなく、他のイベントの伝播orデフォルトアクションを停止したい場合は情報を共有して、停止対象のイベントハンドラ上でpreventDefault()もしくはstopImmediatePropagation()を実行する必要があります。

think49

2022/06/25 09:44 編集

なお、preventDefault()で停止するのはデフォルトアクション、stopImmediatePropagation()で停止するのはイベント伝播。両者は全く異なる動きをします。どういう動きを期待されているのかわかりませんが、「AやB」のように同列に扱えるメソッドではないので、目的を見据えて機能を選択してください。

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

回答1件

ベストアンサー

申し訳ありませんが、ご掲示のJavaScriptコードの意図がわかりませんでした。
HTMLだけ流用して、下記の要件を満たすコードを書きました。

要素をドラッグの発動条件 … 「mousedownした要素ノード」と「mouseupした要素ノード」が不一致
clickイベントハンドラの発動条件 … 「mousedownした要素ノード」と「mouseupした要素ノード」が同一

HTML
1<!DOCTYPE html>
2<title>sample</title>
3<style>
4	.drag-and-drop {
5		margin: 1em;
6		height: 3em;
7	}
8	#red-box {
9		color: black;
10		background-color: #fee;
11		border: solid 1px red;
12	}
13	#blue-box {
14		color: black;
15		background-color: #eef;
16		border: solid 1px red;
17	}
18	#yellow-box {
19		color: black;
20		background-color: #ffe;
21		border: solid 1px darkorange;
22	}
23</style>
24<div class="drag-and-drop" id="red-box">red-box</div>
25<div class="drag-and-drop" id="blue-box">blue-box</div>
26<div class="drag-and-drop" id="yellow-box">yellow-box</div>
27<script>
28	'use strict';
29	const listner = {
30		lastMousedownElement: null,
31		lastMouseupElement: null,
32		handleEvent: function handleEvent (event) {
33			switch (event.type) {
34				case 'mousedown':
35					console.log(event.type, event.target);
36					this.lastMousedownElement = event.target;
37					break;
38				case 'mouseup':
39					console.log(event.type, event.target);
40					this.lastMouseupElement = event.target;
41					break;
42				case 'click':
43				if (this.lastMousedownElement === this.lastMouseupElement) return;
44					console.log(event.type, event.target);
45					break;
46			}
47		}
48	};
49
50	document.addEventListener('click', listner, false);
51	document.addEventListener('mouseup', listner, false);
52
53	for (let dragElm of document.getElementsByClassName('drag-and-drop')) {
54		dragElm.addEventListener('mousedown', listner, false);
55	}
56</script>

このコードが期待通りの動作でない場合は、「ドラッグの必要条件」「clickの必要条件」を明確にしてください。

Re: teru- さん

投稿2022/06/26 14:39

think49

総合スコア18189

teru-

2022/06/27 06:29

解決しましたありがとうございます。イベントごとにプロパティを追加して、clickの場合だけ「if (this.lastMousedownElement === this.lastMouseupElement) return;」で処理を制御するという部分が考え及びませんでした。自分一人では到底解決できなかったと思います。。

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