Question

我有一个网页，当用户将鼠标移出页面时会显示一条消息。除Internet Explorer外，所有浏览器都能正常运行。在Internet Explorer中，我的代码可以正常工作，除非用户单击表单选择项。当用户从下拉列表中选择一个项目时，clientX和clientY会报告一个不正确的值，这会使我的消息显示为用户将鼠标移到页面之外。该消息应仅在鼠标实际出现在页面外时显示。我已经在使用旧版IE的解决方案了。有没有人知道一种不同的方法来解决这个问题，以便代码在旧的IE浏览器中正常工作（7-8）？

这是我的代码：

if (document.addEventListener) {
    window.addEventListener("mouseout", popMessage, false);
} else {  // IE before version 9
    document.attachEvent ('onmouseout', popMessage);
}

.
.
.
.

var mouseX = 0;
var mouseY = 0;

function popMessage (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;

    if ('pageX' in e) { // all browsers except IE before version 9
        var mouseX = e.pageX - document.documentElement.scrollLeft;
        var mouseY = e.pageY - document.documentElement.scrollTop;
    }
    else {  // IE before version 9
        mouseX = e.clientX + document.documentElement.scrollLeft;
        mouseY = e.clientY + document.documentElement.scrollTop;
    }

    if ((mouseY < 0 || mouseY > window.innerHeight-1)
    ||  (mouseX < 0 || mouseX > window.innerWidth-1))
    {
        abandonPanel.show();
        // alert("x:" + mouseX + "  y:" + mouseY + "  innerHeight:" + window.innerHeight + "  innerWidth:" + window.innerWidth);

        if (document.addEventListener) {
            window.removeEventListener("mouseout", popMessage, false);
        } else {  // IE before version 9
            document.detachEvent ('onmouseout', popMessage);
        }
    }
}

Answer 1

将代码附加如下

        else {  // IE before version 9
        if (e.srcElement.nodeName!="SELECT") { // IE reports inaccurate mouse information on SELECT elements
            mouseX = e.clientX + document.documentElement.scrollLeft;
            mouseY = e.clientY + document.documentElement.scrollTop;
        }
        else {
          mouseX = 50  
          mouseY = 50
        }

    }

如果用户将鼠标放在选择元素上以保持javascript不会失火，则会输入虚拟值。

Answer 2

当事件的目标（srcElement）是文档时，e.clientX只能像e.pageX一样工作。

在表格和定位元素以及表单元素中，需要考虑包含元素的偏移量 -

var node=event.srcELement, mouseX=node.offsetLeft+event.clientX;
while(node.offsetParent){
  node=node.offsetParent;
  mouseX+=node.offsetLeft;
}

也适用于mouseY。

在srcElement为正文之前忽略mousemoves会更简单。

clientX，clientY javascript在Internet Explorer中无法正常工作

2 个答案: