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

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

0 голосов
/ 23 июня 2018

Обратите внимание, что если вы наберете 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 Ответ

0 голосов
/ 23 июня 2018 

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>
...