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上移動

回答

相關問題