javascript如何在mousedown上不断移动元素并停止在mouseup上移动

任何人都可以帮助我完成以下任务吗？提前致谢！javascript如何在mousedown上不断移动元素并停止在mouseup上移动

使用JavaScript（我不想使用JQuery），在鼠标下如何继续移动一个元素，如果点击id navLinkLeft，或者继续向右移动，如果点击id navLinkRight，则停止鼠标向上。

<nav> 
<a href="#" id="navLinkLeft">Link Left</a> 
<div id="navLinks">Navigation Links to Be Moved</div> 
<a href="#" id="navLinkRight">Link Right</a> 
</nav>

我已经添加了事件监听器，但我不知道如何继续移动元素。目标是在鼠标向下时继续将id navLinks向左或向右移动，并在鼠标向上时停止。

<script> 
    var navLinkLeft = document.getElementById("navLinkLeft"); 
    navLinkLeft.addEventListener("mousedown", moveLeft, false); 
    navLinkLeft.addEventListener("mouseup", stopMovingLeft, false); 
    var navLinkRight = document.getElementById("navLinkRight"); 
    navLinkRight.addEventListener("mousedown", moveRight, false); 
    navLinkRight.addEventListener("mouseup", stopMovingRight, false); 

    function moveLeft(){ 
     var navLinks = document.getElementById("navLinks"); 
     var x = -50; 
      navLinks.style.left += x + "px"; 
     } 

    function stopMovingLeft(){ 

    } 

    function moveRight(){ 
     var navLinks = document.getElementById("navLinks"); 
     var x = +50; 
      navLinks.style.left += x + "px"; 
    } 

    function stopMovingRight(){ 

    } 
</script>

来源

2014-10-11 Marcelo Oliveira

我建议寻找到'setInterval'。当mouseup事件触发时可以使用返回值来取消定时器。请参阅此处：http：//www.w3schools.com/jsref/met_win_setinterval.asp – enhzflep 2014-10-12 00:00:58

navLinkLeft.addEventListener（“mousedown”，function（）{navLinkLeft.timer = setInterval（moveLeft，100）}，false）; navLinkLeft.addEventListener（“mouseup”，function（）{clearInterva（navLinkLeft.timer）}，false）; – dandavis 2014-10-12 00:00:59

您可能想要使用[事件捕获]（https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture）。 – jfriend00 2014-10-12 00:09:30

在JavaScript中创建一个变量，当你将鼠标悬停在按钮是真实的，反之亦然，然后基础，可变的运动。我认为这可能是一个事件，但使用变量可能会给你更多的灵活性。就像其他人所说的那样，你可能会在setInterval（）中引发if语句。 SetInterval与我用于更新画布应用程序中的框架的方法相同。

不知道你在做什么，但画布对于这样的事情是甜蜜的，但可能不适合你在做什么。（适合东西的地方闪光可能是有用的。）

示例代码： http://jsfiddle.net/otqr7ur5/26/它有点乱，（好吧，很多），因为我没有带在一段时间使用的JavaScript，但这个演示作品。我只实现了向左移动（用右键按钮），但它具有你所需要的，我相信你可以编辑它来使用它。

基本思路：

function updatePos() { //Updates the position every 200 ms 

if (holdingLeft === true) { 
    currentX = currentX+10; 
    navLinks.style.right = currentX + 'px'; 
    console.log(navLinks.style.right); 
}

holdingLeft = true; //In the event, triggers it to move 
holdingLeft = false; //Stops it moving right.

setInterval(function() { //Messy way of making update pos run every 200ms. I dont know why I put it in a function.... you can clean. 
    updatePos(); 
    } 
}, 200);

来源

2014-10-12 00:01:09 5Mixer

谢谢，那可以工作Mixerman123！ – 2014-10-12 10:47:09

嘿Mixerman123，如果你不介意还有一个问题。我如何让它停止？当鼠标向下移动时，它将移出屏幕并继续前进！感谢你所做的一切，做得非常好！ – 2014-10-12 11:33:53

对不起长时间的空气，一直在学校。当我今晚回家时，我会编辑我的答案。只需在if语句中移动元素以查看事件是否超出网站宽度即可。我会尽量记住今晚给你一个样品。 – 5Mixer 2014-10-13 00:54:23

javascript如何在mousedown上不断移动元素并停止在mouseup上移动

回答

相关问题