Question

如何在下面的代码段中显示的每种情况/情况下只触发一次事件？

在我的例子中，如果鼠标位置的x位置值在25 - 50之间，如果y位置值为0 - 25，它将触发一个事件。但如果你看到控制台，事件会反复发生。

如何在每个条件下记录控制台（或更多事件，如果稍后添加）？如果鼠标离开'条件'，稍后再返回，console.log将再次触发？

$(document).mousemove(function(getCurrentPos){
  var xCord = getCurrentPos.pageX;
  var yCord = getCurrentPos.pageY;
  xPercent = xCord / $( document ).width() * 100;
  yPercent = yCord / $( document ).height() * 100;


if ((xPercent > 0 && xPercent < 25) && (yPercent >= 0 && yPercent < 25)){
console.log('1'); /* how to fire only once?*/
/* more events here later */
} else if ((xPercent >= 25 && xPercent <= 50) && (yPercent > 0 && yPercent < 25)) {


console.log('2'); /* how to fire only once?*/
/* more events here later */

}else if ((xPercent >= 50 && xPercent <= 75) && (yPercent > 0 && yPercent < 25)) {
        console.log('3');/* how to fire only once?*/
/* more events here later */
    } 

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

使用您在entered事件之外定义的mousemove变量。

＆＃13;

var entered = false;

$(document).mousemove(function(getCurrentPos){
    var xCord = getCurrentPos.pageX;
    var yCord = getCurrentPos.pageY;
    var xPercent = xCord / $( document ).width() * 100;
    var yPercent = yCord / $( document ).height() * 100;

    if(entered) {
        return; // skip rest of code if already entered once
    }

    if ((xPercent > 0 && xPercent < 25) && (yPercent <= 0 && yPercent < 25)){
        entered = true;
        console.log('1');
        /* how to fire only once?*/
        /* more events here later */
    } else if ((xPercent >= 25 && xPercent <= 50) && (yPercent > 0 && yPercent < 25)) {

        entered = true;
        console.log('2');
        /* how to fire only once?*/
        /* more events here later */

    }else if ((xPercent >= 50 && xPercent <= 75) && (yPercent > 0 && yPercent < 25)) {
        entered = true;
        console.log('3');
        /* how to fire only once?*/
        /* more events here later */
    } 

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

也许您还想在页面底部查看此jQuery mouseenter示例：https://api.jquery.com/mouseenter/

Answer 2

你走了！您只需要避免为每个条件设置一些唯一值，并在输入时再次检查...并在没有时重置它。

＆＃13;

var currentArea = false;
    $(document).mousemove(function(getCurrentPos){
      var xCord = getCurrentPos.pageX;
      var yCord = getCurrentPos.pageY;
      xPercent = xCord / $( document ).width() * 100;
      yPercent = yCord / $( document ).height() * 100;

      if ((xPercent > 0 && xPercent < 25) && (yPercent <= 0 && yPercent < 25)){
        if(currentArea!="Area1"){
          console.log('1');
          currentArea = "Area1";
        }
      } else if ((xPercent >= 25 && xPercent <= 50) && (yPercent > 0 && yPercent < 25)) {
        if(currentArea!="Area2"){
          console.log('2');
          currentArea = "Area2";
          //do this
        }
      }else if ((xPercent >= 50 && xPercent <= 75) && (yPercent > 0 && yPercent < 25)) {
        if(currentArea!="Area3"){
          console.log('3');
          currentArea = "Area3";
          //do this
        }
      }else{
        console.log('outside')
        currentArea=false
      }

    });

＆＃13;

Answer 3

您可以使用数组记录已触发的事件。这样你就可以使用任意数量的事件。一旦事件被触发，它将被记录到数组中，下次我们检查是否已经运行了它，如果是，我们会忽略它。

        <script>
        var logged = [];
        $(document).mousemove(function(getCurrentPos) {
            var xCord = getCurrentPos.pageX;
            var yCord = getCurrentPos.pageY;
            xPercent = xCord / $(document).width() * 100;
            yPercent = yCord / $(document).height() * 100;

            if ((xPercent > 0 && xPercent < 25) && (yPercent <= 0 && yPercent < 25) && ($.inArray(1, logged) == -1)) {
                logged.push(1);
                console.log('1'); /* how to fire only once?*/
                /* more events here later */
            } else if ((xPercent >= 25 && xPercent <= 50) && (yPercent > 0 && yPercent < 25) && ($.inArray(2, logged) == -1)) {
                logged.push(2);
                console.log('2'); /* how to fire only once?*/
                /* more events here later */

            } else if ((xPercent >= 50 && xPercent <= 75) && (yPercent > 0 && yPercent < 25) && ($.inArray(3, logged) == -1)) {
                logged.push(3);
                console.log('3');/* how to fire only once?*/
                /* more events here later */
            }
        });
    </script>

基于当前鼠标移动位置

3 个答案: