Javascript 尝试让onmouseinter和onmouseout在dom中处理新的img

环境：Safari 110.0.1，OSX（MacOS）10.12.6

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

当我创建img元素时，我似乎无法添加这些元素，因为图像没有加载，而且我读到（在某个地方，lol，这是一个漫长的一天），一个元素在可以附加函数之前必须加载。我确实在HTML中尝试过；没有快乐

所以我有一个计时器，我正试图将它连接到那里，但这也不起作用-函数永远不会被调用

我尝试在页面加载后启动计时器，但是，这不起作用-over/out函数仍然无法启动。计时器肯定在运行，这就是在页面缩放发生变化时强制重画的原因，而且它是有效的。通过单击图像下方的复选标记，您可以看到我希望鼠标移到/移出时发生的情况

，所有的HTML和Javascript代码都可以在那里看到（在页面下方）。如有任何见解，我们将不胜感激

到目前为止，我所能做的最好的事情就是通过在HTML中指定out来将事件附加到周围的div上，就div而言，它们在这里做的事情几乎是正确的。但是当鼠标移到图像上时，它就离开了div，因此与我想要的相反：onmouseout启动，我想要在图像上发生的事情就消失了

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

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;
    }
}

函数mousingover（）
{
console.log（'over'）；
如果（dismode==1）返回；
显示图片注释（“mypic”）；
}
函数mousingaway（）
{
console.log（'away'）；
如果（dismode==0）返回；
显示图片（“mypic”）；
}
函数代码（）
{
//var pic=document.getElementById（'mypic'）；//获取（最终）就绪元素
//var eltype=pic.nodeName；
//log（'eltype:'，eltype）；
//pic.onmouseinter=function（）{mousingover（）；}
//pic.onmouseout=function（）{mousingaway（）；}
//console.log（图onmouseout）；
//重新缩放显示时，此div的宽度将更改
//这用于重新启动票据去向的计算：
var myAnchor=document.getElementById（'picdiv'）；
var xd=myAnchor.offsetWidth；
如果（工作==0&&xd！=xdim）
{
工作=1；
如果（dismode==1）显示图像注释（“mypic”）；
否则显示图像（“mypic”）；
xdim=xd；
工作=0；
}
t计数器=t计数器+1；
如果（tcounter>10 | | tcounter<0）//尝试延迟以便映像有时间加载
{
var pic=document.getElementById（'mypic'）；//获取（最终）就绪元素
pic.onmouseinter=function（）{mousingover（）；}
pic.onmouseout=function（）{mousingaway（）；}
t计数器=0；
}
}

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

我正在积极地做这件事，所以计时器的代码会改变；该页面始终显示当前正在使用的代码

---

我正试图用纯Javascript来实现这一点。

我查看了您的HTML，其中有一个

canvas

元素和

img

元素。看起来画布覆盖了图像，是吗？如果是这样，画布将获取鼠标事件，img将看不到它们。

是的，画布将覆盖图像。让我看看我能用它做些什么……您可以随时将事件处理程序添加到画布。