检测浏览器内的鼠标移动

Question

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

但是，我想有一个iframe（在登录系统内），但它不能在iframe中点击或移动鼠标。我不知道iframe的问题是什么。任何可以告诉我任何方式来找出mousemove行动？非常感谢你。

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

Answer 1

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

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

Answer 2

那么这里的一些代码片段，做到了这一点，

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

编辑： 如果添加这个话，即使用户移动在iframe上它不再重要。

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

和这里的codepen链接http://codepen.io/ram333/pen/ygLNQG

干杯，

RJ

Answer 3

http://jsfiddle.net/keshann/oqjgzsm0/518/ 检查这个小提琴 你可以鼠标停止延迟检测功能如下

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

Iframe捕获鼠标事件，但如果满足跨域策略，则可以将事件传输到父范围。具体方法如下：

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