jQuery防止onmouseover事件

jQuery prevent onmouseover events

本文关键字：事件 onmouseover 防止 jQuery 更新时间：2023-09-26

我已经搜索了一段时间了，但还没有结果。我有多个鼠标悬停事件与动画。所以我希望能够禁用鼠标悬停事件发生，如果还有其他动画运行..

我一直在玩jQuery.stop()很多，但不可能使它工作。我实际上不确定在哪里把这个代码在我的函数..

这是我的html与地图:

<img src="assets/menu588x588.png" alt="" usemap="#map" />
   <map id="map" name="map">
      <area onmouseover="driveTo(330);" shape="poly" coords="93, 264, 2, 270, 7" />
      <area onmouseover="driveTo(300);" shape="poly" coords="122, 336, 101, 390" />
      <area onmouseover="driveTo(230);" shape="poly" coords="370, 335, 446, 388, 3574" />
   </map>

和我的JS函数与一些超时和动画:

    function driveTo(new_position){
              $(function() {
                var pre_position   = Number(document.getElementById("pre-position").value);
                var goal           = 360 - pre_position + new_position;
                var $elem          = $(".car-box"), degree = pre_position, timer;
                rotate(goal);
                function rotate(goal) {
                  $elem.css({ 'transform': 'rotate(' + degree + 'deg)'});
                  if(new_position < pre_position){
                    if(goal > 0){
                      timer = setTimeout(function() {
                          --goal;
                          ++degree;
                          rotate(goal);
                      },5);
                    }
                    if(goal === 0){
                      document.getElementById("pre-position").value = new_position;
                    }
                  }
                }
              });
            }

我怕在这些内部函数中有点迷失。

非常感谢您的建议!

试试这个:

var inProgress = false;
function driveTo(new_position){
    if(inProgress){
        return;
    }

    $(function() {
        inProgress = true;
        var pre_position   = Number(document.getElementById("pre-position").value);
        var goal           = 360 - pre_position + new_position;
        var $elem          = $(".car-box"), degree = pre_position, timer;
        rotate(goal);
        function rotate(goal) {
            $elem.css({ 'transform': 'rotate(' + degree + 'deg)'});
            if(new_position < pre_position){
                if(goal > 0){
                    timer = setTimeout(function() {
                        --goal;
                        ++degree;
                        rotate(goal);
                    },5);
                }
                if(goal === 0){
                    document.getElementById("pre-position").value = new_position;
                    inProgress = false;
                }
            }
        }
    });
}