If you press the save button, it will get stuck.

Asked 1 years ago, Updated 1 years ago, 29 views

This is a memo function that allows you to drag and drop smoothly by clicking on the black part of the memo, but when you press the save button, it sticks to the cursor (two clicks away).
I want to fix it!

Please tell me what's wrong with the 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='Save';
  modal.appendChild(saveButton);
  document.body.appendChild(modal);
  console.log("function");
  modal.addEventListener ('musedown', mdown);
  modal.addEventListener('touchstart',mdown);
  // "Function when mouse is pressed"
  function mdown(e){
      console.log("mdown");
      This.classList.add("drag");
      // Absorbs differences between touched and mouse events
      if(e.type==="mousedown"){
          var event=e;
      } else{
          var event=e.changedTouches[0];
      }
      // Get relative coordinates in elements
      posX=event.pageX-this.offsetLeft;
      posY = event.pageY-this.offsetTop;
      // Callback to Move Event
      document.body.addEventListener("mousemove", mmove);
      document.body.addEventListener("touchmove", mmove);
  }
  // "Fire when mouse cursor moves"
  function mmove(e){
      console.log("mmove");
      // Get the element you are dragging
     vardrag= document.getElementsByClassName("drag")[0];
      //Similarly absorbs the difference between mouse and touch
      if(e.type==="mousemove"){
          var event=e;
      } else{
          var event=e.changedTouches[0];
      }
      // Suppresses default behavior so that the screen does not move when flicking
      e.preventDefault();
      // Move the element where the mouse moved
      drag.style.top =event.pageY-posY+"px";
      drag.style.left=event.pageX-posX+"px";
      // Fire when mouse button is released or cursor is released
      drag.addEventListener("mouseup",mup);
      document.body.addEventListener("mouseleave",mup);
      drag.addEventListener("touchend",mup);
      document.body.addEventListener("touchleave",mup);
  }
  // "Fire when the mouse button is up"
  function mup(e){
      console.log("mup");
      vardrag= document.getElementsByClassName("drag")[0];
      // Clearing the Move Event Handler
      document.body.removeEventListener("mousemove", mmove);
      drag.removeEventListener("mouseup",mup);
      document.body.removeEventListener("touchmove", mmove);
      drag.removeEventListener("touchend",mup);
      // Also erase class name .drag
      drag.classList.remove("drag");
  }
});

Enter a description of the image here

javascript

2022-09-30 19:48

1 Answers

The reason is that the mousedown event when you click the save button causes the bubble up to the modal element to launch the mmove() function. The mouseup event handler is not registered and the function mup() is not called when you click.After clicking, the mousemove event fires, and the mouseup event handler is also registered, but the button is already separated, so it is left dragging.

In addition to the save button, you may be left dragging wherever you click in the modal.

The solution is to always register the mouseup event handler mup() (not in mmove().


2022-09-30 19:48

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.