我创建了一个simle JS滑块，可以通过eventListener onmousedown对点击作出反应。但是如果你将运行下面的代码，你会看到，如果我们按住鼠标左键离开滚动区toddler，onmouseup没有被eventListener scrollContainer正确停止。 toddler会松散地滚动，我们会直接点击他。
需要什么 - 当我们释放鼠标左键（结束eventListener toddler之后）时，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>
答案 0 :(得分：1)
对此的修复几乎是非常简单的。当鼠标不在＆＃34;蹒跚学步的时候，你没有得到onmouseup被解雇的原因。非常简单，因为鼠标不会超过小孩＃34; （鼠标事件不会触发鼠标指针未触及的对象）。
只需将聆听者更改为整个窗口（在＆＃34;真实＆＃34;代码中，您可能需要添加一个警卫，以便您了解哪个滑块需要鼠标向上）。
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>
答案 1 :(得分：0)
对此的一个解决方案可能是
将mouseout事件绑定到特定的目标区域，一旦鼠标离开该区域，您应该手动触发，或者在javascript我们应该说dispatch事件{{1}并且应该绑定到外部滑块容器，以便在单个页面上具有多个滑块不会相互影响。只要您离开容器，mousedown事件就会发送mouseout toddler事件。
如果子元素悬停，则阻止mousedown触发的示例代码取自here，请参阅下面的滑块。
mouseoutvar scrollContainer = document.getElementById('scrollContainer');
var scrollLine = document.getElementById('scrollBar');
var toddler = 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;
};
}
function makeMouseOutFn(elem) {
var list = traverseChildren(elem);
return function onMouseOut(event) {
var e = event.toElement || event.relatedTarget;
if (!!~list.indexOf(e)) {
return;
}
// handle mouse event here!
if ('createEvent' in document) {
// modern browsers, IE9+
var e = document.createEvent('HTMLEvents');
e.initEvent('mousedown', false, true);
toddler.dispatchEvent(e);
} else {
// IE 8
var e = document.createEventObject();
e.eventType = 'mousedown';
toddler.fireEvent('on' + e.eventType, e);
}
};
}
//quick and dirty BFS children traversal, Im sure you could find a better one
function traverseChildren(elem) {
var children = [];
var q = [];
q.push(elem);
while (q.length > 0) {
var elem = q.pop();
children.push(elem);
pushAll(elem.children);
}
function pushAll(elemArray) {
for (var i = 0; i < elemArray.length; i++) {
q.push(elemArray[i]);
}
}
return children;
}
toddler.addEventListener('mousedown', letsMove);
scrollContainer.addEventListener('mouseout', makeMouseOutFn(scrollContainer), true);