Как заставить "onmouseup" функционировать, если пользователь перетаскивает курсор с div

Question

Как заставить "onmouseup" функционировать, если пользователь перетаскивает курсор с div

Обратите внимание, как если вы onmousedown через div, он превращается из зеленого в красный. Это ожидается. Но если вы удерживаете мышь и перетаскиваете курсор в сторону от div, то отпустите мышь, onmouseup не будет работать, потому что курсор больше не зависает над div. Div остается красным, а не возвращается в исходное зеленое состояние.

Должен ли я использовать onmousemove?

Есть идеи как решить это?

function mouseDown() {
    document.getElementById("test").style.backgroundColor = "red";
}

function mouseUp() {
    document.getElementById("test").style.backgroundColor = "green";
}

#test {
position: absolute;
height: 50px;
width: 100px;
background-color: green;
}

<div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()">
</div>

1

javascript onmousedown onmouseup

Источник

user6614996 23 июн '18 в 17:24

1 ответ

Решение

Другие вопросы по тегам javascript onmousedown onmouseup

user9918920 23 июн '18 в 17:30 2018-06-23 17:30 · Accepted Answer · 2018-06-23 17:30

function mouseDown() {
    document.getElementById("test").style.backgroundColor = "red";
    document.getElementsByTagName("BODY").onmouseup = function() {mouseUp()};
}

function mouseUp() {
    document.getElementById("test").style.backgroundColor = "green";
}

#test {
position: absolute;
height: 50px;
width: 100px;
background-color: green;
}

<body>
<div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()" 
onmouseout="mouseUp()">
</div>
</body>

ты должен использовать onmouseout() которые позволяют изменять содержимое, когда мышь покидает элемент.

вот ссылка для получения дополнительной информации

или вы должны использовать mouseup с родительским элементом в нашем случае элемент div с id=full Смотри сюда

function mouseDown() {
          document.getElementById("test").style.backgroundColor = "red";
      }

      function mouseUp() {
          document.getElementById("test").style.backgroundColor = "green";
      }

  #test {
    position: absolute;
    height: 50px;
    width: 100px;
    background-color: green;
    }
  #full{
      width: 100%;
      height: 2000px;
      background: blue;
    }

<body>
<div id="full" onmouseup="mouseUp()" >

    <div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()">
  </div>
  
</div>
  

</body>