检测鼠标在浏览器内的移动。

8 浏览
0 Comments

检测鼠标在浏览器内的移动。

问题：\n我想要在浏览器中检测鼠标移动。当鼠标停留60秒时，用户将被登出。\n然而，我想要在登录系统中有一个iframe，但它不能在iframe内点击或移动鼠标。我不知道iframe的问题在哪里。有人能告诉我如何找到鼠标移动的方式吗？非常感谢。\n

0

3 答案

0 Comments

问题：如何在浏览器中检测鼠标移动？

原因：该问题的出现是因为需要在浏览器中实时检测鼠标移动事件，并进行相应的操作。

解决方法：下面是一段代码，可以实现在浏览器中检测鼠标移动事件的功能。

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)

希望能帮到你！

0
0 Comments

问题出现的原因是因为在iframe标签上设置了onMouseOver事件，导致鼠标在iframe上移动时会触发over()函数，但是用户希望只在iframe内部检测鼠标移动。

解决方法是移除iframe标签上的onMouseOver事件，并在iframe内部添加鼠标移动事件的监听器。当鼠标在iframe内部移动时，触发相应的事件处理函数。

以下是修改后的代码：

function over() {
  console.log("over");  
}
var iframe = document.querySelector('iframe');
iframe.contentWindow.document.addEventListener('mousemove', function() {
  console.log("mousemove");
});


<iframe width="300" height="300" src="http://google.com" />

这样修改后的代码会在iframe内部检测鼠标移动事件，并在控制台上输出"mousemove"。

0
0 Comments

问题的原因是在一个iframe中无法检测鼠标移动事件。解决方法是将鼠标移动事件传递给父级窗口，前提是满足跨域策略。具体方法是在父级窗口中定义一个函数来监听鼠标移动事件，并在iframe的onmousemove事件中调用该函数来触发鼠标移动事件。最后，在父级窗口中添加一个监听器来处理鼠标移动事件，并将鼠标坐标输出到控制台和页面中。

完整代码如下：

// 在iframe中传递鼠标移动事件给父级窗口
function bubbleIframeMouseMove(iframe) {
  var existingOnMouseMove = iframe.contentWindow.onmousemove;
  iframe.contentWindow.onmousemove = function(e) {
    if (existingOnMouseMove) existingOnMouseMove(e);
    var evt = document.createEvent("MouseEvents");
    var boundingClientRect = iframe.getBoundingClientRect();
    evt.initMouseEvent(
      "mousemove",
      true,
      false,
      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
    );
    iframe.dispatchEvent(evt);
  };
}
// 获取要监听鼠标移动事件的iframe元素
var myIframe = document.getElementById("iframe");
// 设置鼠标移动事件冒泡
bubbleIframeMouseMove(myIframe);
// 监听鼠标停止事件
document.getElementById('iframe').addEventListener('mousestop', function(e) {
  console.log('鼠标坐标为：', e.detail.clientX, e.detail.clientY);
  document.getElementById("message").innerHTML = '鼠标坐标为：' + e.detail.clientX + ' ' + e.detail.clientY;
});

HTML代码：

如果iframe的src属性指向外部网站，那么无法检测鼠标移动事件。

0