Css：悬停虽然元素不在前面

Question

我正在编写一个网站，在该网站上显示按网格排列的图片。我希望可以用鼠标拖动它们并用鼠标滚轮放大和缩小。到目前为止，这已经有效。这是我的代码的样子：

        var clicked = [0,0];
        var pos = [0,0]; // <-- This ist the position of the image(s)
        var dragging = false
        var zoom = 1;


        //this function is for zooming in and out
        window.onmousewheel = function(event)
        {
            if (event.deltaY > 0)
            {
                zoom *= 0.9;
            }
            else
            {
                 zoom *= 1.1;
            }
            update(0, 0);
        }
        window.onmousedown = function(event)
        {
            clicked = [event.clientX, event.clientY];
            dragging = true;  
        }
        window.onmousemove = function(event)
        {
            if (dragging == false){return;}
            update((event.clientX-clicked[0]),(event.clientY-clicked[1]))
        }
        window.onmouseup = function(event)
        {
            pos = [pos[0] + (event.clientX-clicked[0]), pos[1] + (event.clientY-clicked[1])]; 
            dragging = false;
        }

        function update(addX, addY) //<-- this function just updades the position of the images by using the zoom and pos variable and the addX and addY parameter

所有这些都很好。但是它有一个错误：当我在鼠标直接位于其中一个图像上时开始拖动时，当我释放鼠标时，不会触发 mouseup 事件，因此一切仍在移动，直到您再次用鼠标单击。我也不喜欢的是，如果您在鼠标悬停在其中一个图像上时拖动，它会显示这个标准的 chrome 浏览器图像移动的东西。 我解决这个问题的想法是，制作一个不透明度的div：0；在前面的一切，适合整个屏幕。看起来像这样： (css)

            #controller
            {
                position:absolute;
                top:0;
                left:0;
                bottom:0;
                right:0;
                height:100%;
                width:100%;
                z-index: 999;
                opacity: 0; 
            }

(html)
            <div id="controller"></div>

现在它工作正常。当我用鼠标直接在图像上开始时，我也可以拖动。但后来我意识到，现在我不能进行任何点击事件或简单的 css ：将鼠标悬停在其中一个图像上，显然是因为不可见的 div 现在在前面:(

你们中有人知道两个如何解决这个问题吗？

Answer 1

将onmouseup 放入onmousedown：

window.onmousedown = function(event)
    {
        clicked = [event.clientX, event.clientY];
        dragging = true;  
        window.onmouseup = function(event)
        {
            pos = [pos[0] + (event.clientX-clicked[0]), pos[1] + (event.clientY-clicked[1])]; 
            dragging = false;
        }
    }