Css:hover, хотя элемент не впереди

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: hover над одним из изображений, очевидно, потому что невидимый 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;
        }
    }