Остановить мяч от движения, когда он не над ним?
Я нашел простой пример футбольного мяча, который движется, когда вы перетаскиваете его мышью. (См. код ниже). Однако я пытаюсь отключить горизонтальное движение, а затем поймать событие mouseup, даже если оно не находится над мячом, и остановить движение мяча.
Я вставил в него
var onTheMove = false;а затем установите его в true, когда я щелкаю и перетаскиваю мяч. Это начинается. Однако, когда я ставлю чек в onMouseUp и пытаюсь запустить ball.onmouseup event stuff, он не работает, если мышь не находится над мячом. Я пытаюсь остановить мяч от движения, даже если мышь не находится над ним. Я делаю это, комментируя строку:
//ball.style.left = pageX - shiftX + 'px';Таким образом, мяч движется только вверх и вниз, а не слева направо, поэтому мышь дрейфует от мяча, что нормально, но я все равно хочу, чтобы мяч перестал двигаться, когда я наведу курсор мыши или уроню мяч.
Любые мысли или идеи здесь очень ценятся. Я много занимался веб-разработкой, но, похоже, застрял на этих "событиях". Я не должен иметь что-то в надлежащем порядке/месте. Спасибо!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t) {
var returnValue = false;
var url="/xpagesext.nsf/testscrollbar?OpenPage&Click=" + v;
if (o.href != null) {
o.href = url;
returnValue = true;
} else {
if (t == null)
t = document._domino_target;
window.open(url, t);
}
return returnValue;
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" onmouseup="if (onTheMove == true) {
//stop the mousemove from happening, even if mouse up isn't over the ball.
onTheMove = false
}">
<form action=""><body>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/ball.svg" id="ball">
<script>
let currentDroppable = null;
var onTheMove = false;
ball.onmousedown = function(event) {
onTheMove = true;
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
ball.ondragstart = function() {
return false;
};
</script></form>
</body>
</html>
Что я уже пробовал:
вызов "ball.mouseup" из события onMouseUp.
Я пробовал просто иметь onMouseUp просто установить document.removeEventListener в ball.onmouseup.
DerekT-P
Как движется шарик, если указатель мыши не находится над ним?? Код просто перетаскивает мяч, если указатель мыши не находится над мячом, то мяч не движется. Если это так, то мяч движется с помощью мыши, так что указатель всегда находится над мячом.
ironclads
Возможно, я не совсем ясно выразился. Когда я наведу курсор мыши на мяч, он движется, но при выключенном левом движении мышь может отклониться от мяча, поэтому, когда срабатывает событие mouseup, она не находится над мячом. Я все еще хочу, чтобы мяч перестал двигаться при любом событии mouseup, если мяч был запущен, чтобы двигаться при mousedown. Есть ли в этом смысл?
DerekT-P
Not sure what you mean by "with the left movement is tuned off" and putting your code into JSFiddle I can't get the pointer off the ball once dragging... Anyway your only mouseup event is on the ball itself, so if the mouse isn't on the ball, the mouseup won't get called. You need a mouseup event on the window, which will stop dragging the ball. (In fact in that mouseup you don't care where the mouse is, whatever happens, stop dragging the ball. so just changing ball.mouseup=function... to window.mouseup=function... should do the job. And what is OnTheMove for? If there's code elsewhere that tests if the ball is being dragged, you'll need to set this back to false in your mouseup function too. I suspect there's more code / html elements than you're letting on! ;-)
ironclads
Вот и все. Теперь я чувствую себя глупо. Не могу поверить, что я не подумал изменить это с "ball.onmouseup" на "window.onmouseup". Как бы то ни было, большое вам спасибо за вашу помощь. Это всегда мелочи, которые я не вижу, которые так очевидны. Это не случается тоннами, но когда это происходит, мне нужна свежая пара глаз, чтобы сказать: "э, вы можете просто сделать это." Затем наступает момент "да!" в моем сознании. Я говорю очень благодарное и застенчивое "спасибо" и иду дальше. Спасибо!
DerekT-P
Никаких проблем - мы все там были! Я добавляю это как решение, так что не могли бы Вы отметить, что оно принято? Затем вопрос помечается как решенный и исчезает с оставшихся без ответа вопросов... ваше здоровье!