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

所有这一切都很好。但它有一个Bug：当我开始拖动而鼠标直接在其中一个图像上时，当我释放鼠标时，鼠标事件不会被触发，所以一切都在移动，直到你再次用鼠标点击。我也不喜欢的是，如果你在鼠标悬停在其中一个图像上时拖动它，它会显示这个标准的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;
        }
    }