没有获得正确的onclick值

not getting the right value onclick

本文关键字：onclick      更新时间：2023-09-26

我有一个滑动条和两个左右按钮每个按钮都有两个事件处理程序，如下面的代码所示。

当我点击并等待转换完成时，一切都很好，但是当我点击快速连续点击时，我得到的浮点数不是预期的精确数字(如下面的HTML所示)

这是Javascript和Jquery混合在一起: 

var left = document.getElementById("left");
var right = document.getElementById("right");
var container = document.getElementById("container");

    left.addEventListener("click", function(){
        var marginLeft = container.style.marginLeft;
        var parsedMarginLeft = parseInt(marginLeft);
        console.log(parsedMarginLeft);
        if(parsedMarginLeft > -800) {
            $('#container').animate({marginLeft: '-=200px'}, 0);
        }
    });

    right.addEventListener("click", function(){
        var marginLeft = container.style.marginLeft;
        var parsedMarginLeft = parseInt(marginLeft);
        console.log(parsedMarginLeft);
        if(parsedMarginLeft < 0) {
            $('#container').animate({marginLeft: '+=200px'}, 0);
        }
    });

这是点击后我得到的html:

<div id="container" style="width: 1800px; margin-left: -127.879px;">
</div>

你可以使用:animated选择器作为事件监听器的第一行来测试容器div是否正在运行animation:

var left = document.getElementById("left");
var right = document.getElementById("right");
var container = document.getElementById("container");
left.addEventListener("click", function(){
  if ($('#container:animated').length == 0) {
    var marginLeft = container.style.marginLeft;
    var parsedMarginLeft = parseInt(marginLeft);
    console.log(parsedMarginLeft);
    if(parsedMarginLeft > -800) {
      $('#container').stop().animate({marginLeft: '-=200px'}, 0);
    }
  }
});
right.addEventListener("click", function(){
  if ($('#container:animated').length == 0) {
    var marginLeft = container.style.marginLeft;
    var parsedMarginLeft = parseInt(marginLeft);
    console.log(parsedMarginLeft);
    if (parsedMarginLeft < 0) {
      $('#container').animate({marginLeft: '+=200px'}, 0);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">left</button>
<button id="right">right</button>
<div id="container" style="width: 1800px; margin-left: 0px;background-color: red;">
aaaaaaaaaaaaaaaaa
</div>

相关文章：