javascript - 在鼠标移开之前使元素不与其他元素一起移动

Question

抱歉，如果这已经被问过，我找不到任何东西。过去，我一直在尝试寻找方法，以使下拉菜单在其附加到的元素更改大小时不移动。我有一个这样的下拉菜单：

<div class="dropdown">
    <button class="dropbtn"><div id="imageWidth" class="imageWidth"><input type="image" id="imageclick" src="./images/Clicktoadd.png" accept="image/*" class="imageclick"/></div></button>
    <div class="dropdown-content">
        <a class="font fontsize1"><p class="inline fontsize2">Image size: </p><input type="range" min="50" max="500" value="150" class="slider" id="myRange"></a>
        <a class="font fontsize1"><p class="inline fontsize2">Font size: </p><input type="range" min="10" max="80" value="20" class="slider" id="myRange2"></a>
        <a class="font fontsize1"><p class="inline fontsize2">Text: </p><input class="font textinput" type="text"  maxlength="25"></a>
    </div>
</div>

带有“图像大小”和“字体大小”的滑块所做的是改变图像输入的大小和 imageclick 的 ID。

现在，下拉菜单没有问题。效果很好。但是由于第一个滑块改变了图像的大小，所以出现了一个小问题，即当图像改变大小时，滑块会移动。这意味着它只是直接从屏幕上射出，您不再拖动滑块，而且您几乎无法移动它。

所以。我想要发生的事情是，当您开始移动滑块时，一旦打开下拉菜单，下拉菜单就会完全保持在原位，然后当您将鼠标悬停在图像上时才会移动到图像的底部。

我不希望它在 JQuery 中而只在纯 JavaScript 中，但我可以转换 JQuery 或只使用谷歌托管的库（或任何它被称为的库）。

我改变图像大小的方法就是使用这样的东西：

document.getElementById("myRange").oninput = function() {
    document.getElementById("imageWidth").style.width = this.value + "px";
}

对不起，如果我不是很清楚，这只是我的第三篇文章，谢谢！

标签： javascripthtml

Answer 1

我想到了！我所做的是这样的：

            var menu1 = document.getElementById('html');
            var innermenu1 = document.getElementById('dropdown-content');

            const isHover = e => e.parentElement.querySelector(':hover') === e;    

            const myDiv = document.getElementById('dropdown');
            var hovered, tempvalue;
            document.addEventListener('mousemove', function checkHover() {
                hovered = isHover(myDiv);
                if (hovered !== checkHover.hovered) {
                    console.log(hovered ? 'hovered' : 'not hovered');
                    checkHover.hovered = hovered;
                    if(hovered ? 'hovered' : 'not hovered'=='hovered') {
                        tempvalue = (document.getElementById("myRange").value / 32);
                        innermenu1.style.top = ((parseInt(tempvalue, 10) - (parseInt(menu1.scrollTop, 10)/32)) + (document.getElementById("myRange").value/1)) + 'px';
                    }
                }
            });

            window.onscroll = function (e) {
                if(hovered) {
                    innermenu1.style.top = (parseInt(tempvalue, 10) - (parseInt(menu1.scrollTop, 10)/32) + (document.getElementById("myRange").value/1)) + 'px';
                    innermenu1.style.left = ((document.getElementById("myRange").value/2) - 175) + 'px';
                }
            }
            innermenu1.style.top = menu1.scrollTop + tempvalue + 'px';

            document.getElementById("myRange").oninput = function() {
                document.getElementById("imageWidth").style.width = this.value + "px";
                innermenu1.style.left = ((document.getElementById("myRange").value/2) - 175) + 'px';
            }
            document.getElementById("textinput1").oninput = function() {
                document.getElementById("text1").innerHTML = this.value;
            }
            document.getElementById("myRange2").oninput = function() {
                document.getElementById("text1").style.fontSize = this.value + "px";
            }