

これでできるメモ機能ですが、メモの黒い部分をクリックするとスムーズにドラッグ＆ドロップができますが、保存ボタンを押したらカーソルに合わせて引っ付いてきます(二回クリックすると離れます)。  
それを直したいです！

コードの悪いところを教えてください！

[code]

     const save = (content) => {//save(textbox.value)
      chrome.runtime.sendMessage(content, res => {
          console.log(res);
      });
    };
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      const modalfrm = document.getElementById('ex-memo');
      if (modalfrm != null) return;
      const modal = document.createElement('div');
      modal.id = 'ex-memo';
      // modal.style.width = '500px';
      // modal.style.height = '100px';
      modal.style.zIndex = '2147483647';
      modal.style.position = 'fixed';
      modal.style.left = `${message.posX}px`;
      modal.style.top = `${message.posY}px`;
      console.log("modal.style.left:" + modal.style.left);
      console.log("modal.style.top:" + modal.style.top);
      console.log("modal.style.width:" + modal.style.width);
      console.log("modal.style.height:" + modal.style.height);
      const textbox = document.createElement('textarea');
      textbox.style.width = '600px';
      textbox.style.height = '200px';
      textbox.style.backgroundColor = 'rgb(67, 67, 67)';
      textbox.style.color = 'rgb(51, 166, 184)';
      textbox.value= message.content;
      modal.appendChild(textbox);
      const saveButton = document.createElement('button');
      saveButton.onclick = () => save(textbox.value);
      saveButton.innerText = '保存';
      modal.appendChild(saveButton);
      document.body.appendChild(modal);
      console.log("function");
      modal.addEventListener('mousedown', mdown);
      modal.addEventListener('touchstart', mdown);
      // "マウスが押された際の関数"
      function mdown(e){
          console.log("mdown");
          this.classList.add("drag");
          //タッチドイベントとマウスのイベントの差異を吸収
          if(e.type === "mousedown") {
              var event = e;
          } else {
              var event = e.changedTouches[0];
          }
          //要素内の相対座標を取得
          posX = event.pageX - this.offsetLeft;
          posY = event.pageY - this.offsetTop;
          //ムーブイベントにコールバック
          document.body.addEventListener("mousemove", mmove);
          document.body.addEventListener("touchmove", mmove);
      }
      // "マウスカーソルが動いたときに発火"
      function mmove(e){
          console.log("mmove");
          //ドラッグしている要素を取得
        　var drag = document.getElementsByClassName("drag")[0];
          //同様にマウスとタッチの差異を吸収
          if(e.type === "mousemove") {
              var event = e;
          } else {
              var event = e.changedTouches[0];
          }
          //フリックしたときに画面を動かさないようにデフォルト動作を抑制
          e.preventDefault();
          //マウスが動いた場所に要素を動かす
          drag.style.top = event.pageY - posY + "px";
          drag.style.left = event.pageX - posX + "px";
          //マウスボタンが離されたとき、またはカーソルが外れたとき発火
          drag.addEventListener("mouseup", mup);
          document.body.addEventListener("mouseleave", mup);
          drag.addEventListener("touchend", mup);
          document.body.addEventListener("touchleave", mup);
      }
      // "マウスボタンが上がったら発火"
      function mup(e){
          console.log("mup");
          var drag = document.getElementsByClassName("drag")[0];
          //ムーブベントハンドラの消去
          document.body.removeEventListener("mousemove", mmove);
          drag.removeEventListener("mouseup", mup);
          document.body.removeEventListener("touchmove", mmove);
          drag.removeEventListener("touchend", mup);
          //クラス名 .drag も消す
          drag.classList.remove("drag");
      }
    });
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/7D5XE.png)](https://i.stack.imgur.com/7D5XE.png)


CC BY-SA 4.0
2020-04-01T09:02:47.413
65278
2020-04-02T03:16:06.600
38112
question
javascript
保存ボタンを押したら引っ付いてきます


保存ボタンをクリックしたときの `mousedown` イベントが `modal`
要素まで[バブル](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)して、`mmove()`
関数を起動してしまうのが原因です。 クリックするときは通常 `mousemove` は起きないので `mouseup`
イベントハンドラは登録されず、ボタンを離しても関数 `mup()` が呼ばれません。クリックが終わってから `mousemove` イベントが発火して
`mouseup` イベントハンドラも登録されますが、ボタンは既に離しているのでドラッグしっぱなし状態になります。

保存ボタン以外でも、`modal`の中のどこをクリックしてもドラッグしっぱなしになるのではないでしょうか。

解決策としては、`mouseup` イベントハンドラ `mup()` を、常に登録します (`mmove()`の中でなく)。


CC BY-SA 4.0
2020-04-02T02:16:28.183
65294
2020-04-02T03:16:06.600
2020-04-02T03:16:06.600
3475
3475
65278
answer