CODEWITHSUNDEEP
javascriptjquery
Aurore
Aurore

Reputation: 746

Cannot understand why event is undefined

I'm sorry, I feel this is a really classic issue but since I'm learning I don't know why it's not working in my case.

I'm trying to have a script that detect your idle time and if so, execute a function that get your mouse position. In order to do that, I have the function TimerIncrement() that can check 2 seconds of inactivity, if so I would like to execute another function called GetMousePos in order to get the mouse position and to have a console.log of it.

I've tried looking online and on the forums but nothing I have been doing is helping. Thanks for the precious help.

var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 1000); // 1s

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 2) { // 2sec
        getMousePos();
        idleTime = 0; // reset timer
    }
 
}

function getMousePos(event) {
        x = event.pageX;
        y = event.pageY;
        console.log(x);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Views: 831

Answers (2)

sfy
sfy

Reputation: 3228

You can't get the mouse position without an event, so we need to track the mousemove and save the latest position.

$(function() {
  let idleTime = 0
  let pos = []
  let timer = window.setInterval(incTime, 1000)

  function incTime() {
    idleTime++
    checkTime()
    $('.time span')[0].innerText = idleTime
  }

  function checkTime() {
    if (idleTime > 2) {
      resetTime()
      $('.x span')[0].innerText = pos[0]
      $('.y span')[0].innerText = pos[1]
    }
  }

  $(document).on('mousemove', e => {
    window.clearInterval(timer)
    resetTime()
    pos[0] = e.pageX
    pos[1] = e.pageY
    timer = window.setInterval(incTime, 1000)
  })

  function resetTime() {
    idleTime = 0
    $('.time span')[0].innerText = idleTime
  }
})
<div class="time">Idle time: <span>0</span></div>
<div class="x">X: <span></span></div>
<div class="y">Y: <span></span></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Josh Stevens
Josh Stevens

Reputation: 4221

So you're calling getMousePos which takes a parameter of event and you are not passing anything to it hence the Cannot read property 'pageX' as event.pageX (event not defined). You can only get to the event object ON a event callback so I am assuming you want to get the last event you have seen if any.

The below should work for you, storing the lastEvent seen you should then be able to get the info you want. Hopefully, this code example makes you understand what you were missing.

var idleTime = 0;
var lastEvent = undefined;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 1000); // 1s

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
        lastEvent = e;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
        lastEvent = e;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 2) { // 2sec
        getMousePos(lastEvent);
        idleTime = 0; // reset timer
    }
 
}

function getMousePos(event) {
        if (!event) {
           console.log("No mouse or keypress has been executed yet");
           return;
        }
        x = event.pageX;
        y = event.pageY;
        console.log(x);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 3

Related Questions