Maus über einem Button halten
Hallo zusammen,
mit JavaScript werde ich mich wohl nie anfreunden, deshalb muss ich mal nachfragen:
Gibt es eine Möglichkeit den Mauszeiger über einem Button zu halten, wenn der linke Mausbutton geklickt wurde. Also, wenn man die Maus bewegt, darf der Mauszeiger die Fläche des Buttons nicht verlassen. Erst wenn man die Maustaste wieder loslässt, darf der Mauszeiger wieder weiter bewegt werden.
Sinn der Sache ist, ich will so eine Art Splitter bauen, mit dem man einen linken und rechten Div in der Größe verändern kann. Frames kommen dabei nicht infrage. Das Ändern der Div-Größe ist kein Problem, allerdings rutscht der Mauszeiger bei schneller Bewegungen aus dem Button raus, und dann geht es nicht weiter.
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
height:100vh;
width:100vw;
}
div{
height:100vh;
width:20vw;
border:2px solid black;
}
#left{
position:absolute;
left:0;
}
#left button{
position:absolute;
right:0;
top:50vh;
height:40px;
width:40px;
font-size:25px;
}
button:active{
background:green;
}
</style>
<body>
<div id="left">
<button id="leftbutton"> > </button>
</div>
<script>
const but=document.getElementById('leftbutton');
var i = 0;
var down = false;
but.addEventListener("mousedown", function(event) {
if (event.which === 1) {
down = true;
window.setTimeout(function() {
if (down) {
i++;
window.setTimeout(arguments.callee, 1);
}
}, 1);
window.addEventListener("mousemove", weiter);
}
}, false);
but.addEventListener("mouseup", function(event) {
if (event.which === 1) {
down = false;
window.removeEventListener("mousemove",weiter ,false);
}
});
function weiter(event){
lef=document.getElementById('left');
lef.style.width=(event.clientX+10)+'px';
}
</script>
</body>