Javascript:onmouseover在onmousemove时触发

问题：我在网站上看到一张图片（如

）和一个div，我想用鼠标在上面移动。这很好，但有些东西不起作用：如果我输入图像，onmouseover事件就会发生，但是如果我移动鼠标，总是会触发onmousemove和onmouseover事件，这是不正确的

我做错了什么

编辑

您可以在这里看到示例：

你必须点击下方的复选框（“Bereich zum Ausschneiden wählen”），上传一张大于600x600的图片。在电子邮件中，写“@”。对不起，这是德语；）

EDIT2

---

现在，如果鼠标在图像上，您可以在图像下方看到两条正在增长的线。上一行在触发onmouseover事件时始终添加“now”。当触发onmouseout事件时，下一行总是添加一个“now”。如您所见，这些行增长非常快，因此必须以无休止的循环方式调用它们…？

在这里暗中摸索：是否在

img

上拖动

div

时，浏览器会在哪些对象之间交替移动鼠标

---

当鼠标落在

div

上时，可以在每个

onmousemove

和

onmouseover

事件中设置一个选中的标志。如果设置了标志，那么您将忽略（或做一些不同的事情）这些事件。

这里是我举的一个例子，它实际上也在进行缩放。我只使用了

onmousemove

，并检查光标是否仍在图像区域内。如果不是这样，缩放框将隐藏。我将边框添加到缩放框和图像中，以便您可以看到它有效地处理边框（在这里和那里检查IE）

首先是一些CSS。进行样式设置，使其看起来与禁用JavaScript时相同。在JavaScript中，必须再次设置一些CSS属性，因为不这样做就无法使用它们

body        { text-align:center; margin:0 }
#zoombox    { border:5px solid gray; display:none; position:absolute }
img         { border:2px solid darkgray }

JavaScript。有关重新定义，请参见

window.onload

。我知道这很愚蠢，但不这样做是行不通的。还要注意代码顶部的IE版本检查

var ieVersion = undefined;
if (navigator.appName == 'Microsoft Internet Explorer') {
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(navigator.userAgent) != null) ieVersion = parseInt(RegExp.$1);
}
function cursor(e) {
    if (!e) e = window.event;
    if (e.pageX || e.pageY)
        return { 'x' : e.pageX, 'y' : e.pageY };
    else if (e.clientX || e.clientY) {
        if (ieVersion > 5)
            return { 'x' : e.clientX + document.documentElement.scrollLeft, 'y' : e.clientY + document.documentElement.scrollTop };
        else
            return { 'x' : e.clientX + document.body.scrollLeft, 'y' : e.clientY + document.body.scrollTop };
    }
}
function zoomba(context, e) {
    zoom.style.display = 'block';
    zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
            zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
                                                (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}
window.onload = function() {
    zoom = document.createElement('div');
    zoom.setAttribute('id', 'zoombox');
    zoom.style.width = '150px';
    zoom.style.height = '150px';
    zoom.style.borderWidth = '5px';
    document.body.appendChild(zoom);
    var img = document.getElementsByTagName('img');
    for (var i = 0; i < img.length; i++)
        img[i].style.borderWidth = '2px';
}

---

你能链接到不起作用的代码吗？如果没有不起作用的代码示例，谁能帮助你？还有，哪个浏览器和版本？两位评论员的意思是：提供一个示例，让我们自己看看。我有一个工作示例给你。我明天会把它贴在这里。哇！难以置信，你是一个有16年工作经验的勤奋天才！！我现在就去看看，但是现在已经非常感谢你的回答了！！太棒了！你真是个天才但我还有一个问题：我怎样才能缩小，这样就只需移动边界，而不会放大div的内容呢？@Florian：谢谢你的夸奖我编辑了我的答案，添加了一个没有缩放的版本。

太棒了！你真是个天才，只是有点过时：p
<p>
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="400" height="365" alt="Trollface" />
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="300" height="274" alt="Trollface" />
</p>
<p>
    <img src="http://www.worldfactsandfigures.com/maps/802802.jpg" onmousemove="zoomba(this, event)" width="1000" height="542" alt="Earth map" />
</p>

function zoomba(context, e) {
    zoom.style.display = 'block';
//  zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
//          zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
//                                              (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}