检测浏览器内的鼠标悬停

Posted 2023-03-05

【中文标题】检测浏览器内的鼠标悬停

【英文标题】：Detect the mousemove inside the broswer

【发布时间】：2017-05-17 02:44:44

【问题描述】：

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

但是，我想要一个 iframe（在登录系统内），但它不能在 iframe 内单击或鼠标移动。我不知道 iframe 的问题是什么。任何人都可以告诉我任何方法来找出 mousemove 动作吗？非常感谢。

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

【问题讨论】：

您是要检测mousemove 内部的iframe 还是window 的父级iframe？

我会在 iframe 中进行 mousemove，它会继续检测 iframe 中的 mousemove。如果它正在移动，则计时器将重置为零。

你有iframe的控制权吗？

【参考方案1】：

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>

【讨论】：

非常感谢。但是，如果 frame.src = "" 外部网站。 if 会检测不到鼠标

【参考方案2】：

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

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

【讨论】：

我不希望鼠标悬停，因为我的 iframe 是全尺寸的。所以，我只想检测 iframe 内的 mousemove。如果鼠标移动是 continue ，计时器将被设置为零。

【参考方案3】：

这里有一段代码可以做到这一点，

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