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}
回答1件
あなたの回答
tips
プレビュー