Detect the mousemove inside the broswer

Question

Question: i would like to detect the mousemove inside the browser. When the mouse stop for 60seconds, the user will log out.

However, i would like to have a iframe (inside the login system) , but it cannot click or mousemove inside the iframe. I don't know what is the problems of iframe. Can any tell me any way to find out the mousemove action? Thank you very much.

<iframe id=iframe src=""></iframe>

Are you trying to detect `mousemove` inside of `iframe` or at parent `window` of `iframe`? — guest271314, Jan 03 '17 at 04:10
I would to mousemove in the iframe , it will continue detecting the mousemove in the iframe. if it is moving , the timer will reset to zero. — TaiMan Chan, Jan 03 '17 at 04:12

score 3 · Answer 1 · answered Jan 03 '17 at 04:41

http://jsfiddle.net/keshann/oqjgzsm0/518/ Check this fiddle You can have mouse stop delay detection function as below

(function(mouseStopDelay) {
  var timeout;
  document.addEventListener('mousemove', function(e) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      var event = new CustomEvent("mousestop", {
        detail: {
          clientX: e.clientX,
          clientY: e.clientY
        },
        bubbles: true,
        cancelable: true
      });
      e.target.dispatchEvent(event);
    }, mouseStopDelay);
  });
}(1000));

Iframes capture mouse events, but you can transfer the events to the parent scope if the cross-domain policy is satisfied. Here's how:

// This example assumes execution from the parent of the the iframe

function bubbleIframeMouseMove(iframe) {
  // Save any previous onmousemove handler
  var existingOnMouseMove = iframe.contentWindow.onmousemove;

  // Attach a new onmousemove listener
  iframe.contentWindow.onmousemove = function(e) {
    // Fire any existing onmousemove listener 
    if (existingOnMouseMove) existingOnMouseMove(e);

    // Create a new event for the this window
    var evt = document.createEvent("MouseEvents");

    // We'll need this to offset the mouse move appropriately
    var boundingClientRect = iframe.getBoundingClientRect();

    // Initialize the event, copying exiting event values
    // for the most part
    evt.initMouseEvent(
      "mousemove",
      true, // bubbles
      false, // not cancelable 
      window,
      e.detail,
      e.screenX,
      e.screenY,
      e.clientX + boundingClientRect.left,
      e.clientY + boundingClientRect.top,
      e.ctrlKey,
      e.altKey,
      e.shiftKey,
      e.metaKey,
      e.button,
      null // no related element
    );

    // Dispatch the mousemove event on the iframe element
    iframe.dispatchEvent(evt);
  };
}

// Get the iframe element we want to track mouse movements on
var myIframe = document.getElementById("iframe");

// Run it through the function to setup bubbling
bubbleIframeMouseMove(myIframe);

At last have a listener

// Example use
document.getElementById('iframe').addEventListener('mousestop', function(e) {
  console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY);
  document.getElementById("message").innerHTML = 'Mouse coordinates are: ' + e.detail.clientX + ' ' + e.detail.clientY;
  // The event will bubble up to parent elements.
});

and your html will be

<iframe id="iframe"></iframe>
<div id="message"></div>

thank you so much. but, if the frame.src = "" external website. if will be failed to detect the mouse — TaiMan Chan, Jan 03 '17 at 04:56

score 2 · Answer 2 · answered Jan 03 '17 at 04:11

2

function over() {
  console.log("over");  
}

<iframe width="300" height="300" src="http://google.com" onMouseOver="over()" />

answered Jan 03 '17 at 04:11

hubman

149
1
15

i dont want the mouseover, because my iframe is full size. So ,i only want to detect the mousemove inside the iframe. If the mouse movement is continue , the timer will be set to zero. – TaiMan Chan Jan 03 '17 at 04:13

hungryWolf · Answer 3 · 2017-01-03T04:46:44.490

Well here's some piece of code that does just that,

var logOut = function() {
    (timeOut !== undefined)? window.clearTimeout(timeOut): null;
    isLoggedIn = false;
    document.removeEventListener("mousemove", setTime);
    alert("Oops Logged you out");
};

var setTime = function() {
    window.clearTimeout(timeOut);
    timeOut = window.setTimeout(logOut, maxOut);
};

var timeOut,
    isLoggedIn = true,
    maxOut = 10000;

if (isLoggedIn === true) {
    setTime();
    document.addEventListener("mousemove", setTime);
}

Edit: If you add this then, even if the user moves on Iframe it doesn't matter any more.

document.getElementById("myFrame").addEventListener("mousemove", function(evt) {
    evt.preventDefault();
});

and here's the codepen link http://codepen.io/ram333/pen/ygLNQG

Cheers,

Rj

Detect the mousemove inside the broswer

3 Answers3