试图让 onmouseenter 和 onmouseout 在 dom 中处理新的 img

Question

环境： Safari 110.0.1，OSX (MacOS) 10.12.6

我正在处理图片库类型的显示。有一个元素由 Javascript; 加载了图像；我希望该元素在 onmouseenter 和 onmouseout 上具有功能。

我在创建 img 元素时似乎无法添加这些元素，因为图像未加载，而且我读到（某处，大声笑，这是漫长的一天）元素必须在一个人可以附加功能之前被加载。我确实在 HTML 中尝试过；不开心。

所以我有一个计时器在运行，我正在尝试将它附加到那里，但这也不起作用 - 函数从未被调用。

我尝试在页面加载后启动计时器，但这不起作用 - over/out 函数仍然没有触发。计时器肯定是运行，如果页面缩放比例发生变化，这就是强制重绘的原因，并且有效。您可以通过单击图像下方的复选标记来查看我希望使用鼠标 over/out 发生的情况。

Here's the page，所有 HTML 和 Javascript 代码都在那里可见（在页面下方。）任何见解都将受到赞赏。

到目前为止，我能做的最好的事情是通过在 HTML 中指定 out 来让事件附加到周围的 div，他们做的事情几乎是正确的就 div 而言。但是当鼠标悬停在图像上时，它超出了 div，所以与我想要的相反：onmouseout 触发并且我想要发生的事情发生在 over 图片消失了。

有什么原因我无法在计时器期间附加这些功能吗？这是定时器代码：

function mousingover()
{
    console.log('over');
    if (dismode == 1) return;
    show_image_notes('mypic');
}

function mousingaway()
{
    console.log('away');
    if (dismode == 0) return;
    show_image('mypic');
}

function ticker()
{
//    var pic = document.getElementById('mypic'); // get (eventually) ready element
//    var eltype = pic.nodeName;
//    console.log('eltype:',eltype);
//    pic.onmouseenter = function() { mousingover(); }
//    pic.onmouseout = function() { mousingaway(); }
//    console.log(pic.onmouseout);

    // When the display is rescaled, the width of this div changes
    // This is used to re-fire the calculation of where the notes go:
    var myAnchor = document.getElementById('picdiv');
    var xd = myAnchor.offsetWidth;
    if (working == 0 && xd != xdim)
    {
        working = 1;
        if (dismode == 1) show_image_notes('mypic');
        else              show_image('mypic');
        xdim = xd;
        working = 0;
    }
    tcounter = tcounter + 1;
    if (tcounter > 10 || tcounter < 0) // trying to delay so image has time to load
    {
        var pic = document.getElementById('mypic'); // get (eventually) ready element
        pic.onmouseenter = function() { mousingover(); }
        pic.onmouseout = function() { mousingaway(); }
        tcounter = 0;
    }
}

控制台确认我正在找到具有该 ID 的 IMG，这是正确的，并且功能已附加。他们就是不开火。

我正在努力解决这个问题，所以计时器的代码将会改变；该页面始终显示当前正在使用的代码。

我正在尝试用纯 Javascript 来做到这一点。

Answer 1

我查看了您的 HTML，其中有一个 canvas 元素以及 img 元素。看起来 canvas 覆盖了图像，是吗？如果是这样，canvas 将获取鼠标事件，而 img 将看不到它们。

试图让 onmouseenter 和 onmouseout 在 dom 中处理新的 img

trying to get onmouseenter and onmouseout working on new img in dom

javascript

css

onmouseover

onmouseout