javascript - 在浏览器内检测鼠标

Question

问题:我想检测浏览器内的 mousemove。当鼠标停止 60 秒时，用户将注销。

但是，我想要一个 iframe(在登录系统内)，但它不能在 iframe 内单击或移动鼠标。我不知道iframe有什么问题。谁能告诉我找出 mousemove Action 的方法吗？非常感谢。

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

Answer 1

http://jsfiddle.net/keshann/oqjgzsm0/518/ 检查这个 fiddle 你可以有鼠标停止延迟检测功能，如下所示

(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 捕获鼠标事件，但如果满足跨域策略，您可以将事件传输到父范围。方法如下:

// 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);

终于有一个听众了

// 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.
});

你的 html 将是

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