gpt4 book ai didi

javascript - onmouseup 事件不能正确作用于 slider

转载 作者:行者123 更新时间:2023-11-30 20:47:48 25 4
gpt4 key购买 nike

我创建了一个简单的 JS slider ,它对 eventListener 的点击使用react onmousedown .但是如果你运行下面的代码,你会看到,toddler没有被 eventListener 正确停止 onmouseup如果我们离开滚动区 scrollContainer按住鼠标左键。 toddler将松散地滚动下我们将直接点击他。

需要什么 - toddler当我们释放鼠标左键时必须停止(在结束 eventListener onmousedown 之后)。

我将不胜感激。

		var scrollLine = document.getElementById('scrollBar');
var scrollTog = document.getElementById('toddler');

function letsMove(event) {

var coordsHelp = getRealCoords(toddler);
var shiftX = event.pageX - coordsHelp.left;

getCoords(event);

function getRealCoords(toddler) {
var box = toddler.getBoundingClientRect();

return {
left: box.left + pageXOffset
}
};

function getCoords(event) {
var currentPosition = event.pageX - shiftX;

if (currentPosition >= 300) {
toddler.style.left = 300 + 'px';
} else if (currentPosition <= 104) {
toddler.style.left = 104 + 'px';
} else {
toddler.style.left = currentPosition + 'px';
}
};

scrollContainer.onmousemove = function(event) {
getCoords(event);
console.log();
};

toddler.ondragstart = function() {
return false;
};

toddler.onmouseup = function() {
scrollContainer.onmousemove = null;
scrollContainer.onmouseup = null;
toddler.onmouseup = null;
toddler.onmousemove = null;
return false;
};
}

toddler.addEventListener( 'mousedown', letsMove );
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#scrollContainer {
width: 400px;
height: 200px;
border: 1px solid grey;
border-radius: 4px;
}
#scrollBar {
width: 200px;
height: 5px;
background-color: grey;
border: 1px solid grey;
border-radius: 4px;
margin-top: 24%;
margin-left: 24%;
}

#toddler {
width: 10px;
height: 25px;
position: absolute;
margin-top: -11px;
background-color: blue;
border: 1px solid grey;
border-radius: 2px;
cursor: pointer;
}

</style>
</head>
<body>
<div id="scrollContainer">
<div id="scrollBar">
<div id="toddler"></div>
</div>
</div>

<script>
</script>

</body>
</html>

最佳答案

这个问题的修复几乎是令人尴尬的简单。当鼠标不在“蹒跚学步”上方时,您没有触发 onmouseup 的原因是字面上的原因,因为鼠标不在“蹒跚学步”上方。 (鼠标事件不会为鼠标指针未接触的对象触发)。

只需将监听器更改为整个窗口(在“真实”代码中,您可能想要添加一个守卫,以便您知道哪个 slider 正在等待鼠标松开)。

var scrollLine = document.getElementById('scrollBar');
var scrollTog = document.getElementById('toddler');

function letsMove(event) {

var coordsHelp = getRealCoords(toddler);
var shiftX = event.pageX - coordsHelp.left;

getCoords(event);

function getRealCoords(toddler) {
var box = toddler.getBoundingClientRect();

return {
left: box.left + pageXOffset
}
};

function getCoords(event) {
var currentPosition = event.pageX - shiftX;

if (currentPosition >= 300) {
toddler.style.left = 300 + 'px';
} else if (currentPosition <= 104) {
toddler.style.left = 104 + 'px';
} else {
toddler.style.left = currentPosition + 'px';
}
};

scrollContainer.onmousemove = function(event) {
getCoords(event);
console.log();
};

toddler.ondragstart = function() {
return false;
};

/* toddler.onmouseup = function() { */
window.onmouseup = function() {
scrollContainer.onmousemove = null;
scrollContainer.onmouseup = null;
toddler.onmouseup = null;
toddler.onmousemove = null;
return false;
};
}

toddler.addEventListener('mousedown', letsMove);
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#scrollContainer {
width: 400px;
height: 200px;
border: 1px solid grey;
border-radius: 4px;
}
#scrollBar {
width: 200px;
height: 5px;
background-color: grey;
border: 1px solid grey;
border-radius: 4px;
margin-top: 24%;
margin-left: 24%;
}

#toddler {
width: 10px;
height: 25px;
position: absolute;
margin-top: -11px;
background-color: blue;
border: 1px solid grey;
border-radius: 2px;
cursor: pointer;
}

</style>
</head>
<body>
<div id="scrollContainer">
<div id="scrollBar">
<div id="toddler"></div>
</div>
</div>

<script>
</script>

</body>
</html>

关于javascript - onmouseup 事件不能正确作用于 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48510964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com