Question

任何人都可以帮助我完成以下任务吗？提前谢谢！

使用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>

Answer 1

在JavaScript中创建一个变量，当您将鼠标悬停在按钮上时，该变量为true，反之亦然，然后以该变量的移动为基础。我认为这可能会有一个事件，但使用变量可能会给你一点灵活性。像其他人所说的那样，你可以在setInterval（）中使if语句基于此。 SetInterval与我用来更新画布应用程序中的帧的方法相同。

不确定你在做什么，但画布很适合这样的事情，但可能不适合你正在做的事情。（适用于flash可能有用的东西。）

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

基本思想：

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);

javascript如何在mousedown上连续移动元素并停止在mouseup上移动

1 个答案: