onmouseup 事件对滑块无法正常工作 [英] onmouseup event does not work correctly to the slider

问题描述

我创建了一个简单的 JS 滑块，它通过 eventListener onmousedown 对点击做出反应.但是，如果您运行下面的代码，您会看到，如果我们离开滚动区域 scrollContainertoddler 不会被 eventListener onmouseup 正确停止代码> 按住鼠标左键.toddler 将在下面松散滚动，我们将直接点击他.

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

我将不胜感激.

 var scrollLine = document.getElementById('scrollBar');var scrollTog = document.getElementById('toddler');函数让移动(事件){var coordsHelp = getRealCoords(幼儿);var shiftX = event.pageX - coordsHelp.left;获取坐标(事件)；函数 getRealCoords(幼儿){var box = toddler.getBoundingClientRect();返回 {左:box.left + pageXOffset}};函数 getCoords(event) {var currentPosition = event.pageX - shiftX;如果(当前位置 >= 300){toddler.style.left = 300 + 'px';} else if (currentPosition <= 104) {toddler.style.left = 104 + 'px';} 别的 {toddler.style.left = currentPosition + 'px';}};scrollContainer.onmousemove = 函数(事件){获取坐标(事件)；控制台日志()；};toddler.ondragstart = 函数(){返回假；};toddler.onmouseup = 函数(){scrollContainer.onmousemove = null;scrollContainer.onmouseup = null;toddler.onmouseup = null;toddler.onmousemove = null;返回假；};}toddler.addEventListener('mousedown',letsMove);

<头><meta charset="utf-8"><风格>#scrollContainer {宽度:400px；高度:200px；边框:1px 纯灰色；边框半径:4px；}#滚动条{宽度:200px；高度:5px；背景颜色:灰色；边框:1px 纯灰色；边框半径:4px；保证金最高:24%；左边距:24%；}#学步的儿童 {宽度:10px；高度:25px；位置:绝对；边距顶部:-11px；背景颜色:蓝色；边框:1px 纯灰色；边界半径:2px；光标:指针；}</风格><身体><div id="scrollContainer"><div id="scrollBar"><div id="幼儿"></div>

<脚本></html>

解决方案

解决这个问题的方法非常简单.当鼠标不在幼儿"上方时，您没有触发 onmouseup 的原因实际上是因为鼠标不在幼儿"上方.(鼠标指针未触及的对象不会触发鼠标事件).

只需将侦听器更改为整个窗口(在真实"代码中，您可能需要添加一个保护，以便您知道哪个滑块正在等待鼠标抬起).

var scrollLine = document.getElementById('scrollBar');var scrollTog = document.getElementById('toddler');函数让移动(事件){var coordsHelp = getRealCoords(幼儿);var shiftX = event.pageX - coordsHelp.left;获取坐标(事件)；函数 getRealCoords(幼儿){var box = toddler.getBoundingClientRect();返回 {左:box.left + pageXOffset}};函数 getCoords(event) {var currentPosition = event.pageX - shiftX;如果(当前位置 >= 300){toddler.style.left = 300 + 'px';} else if (currentPosition <= 104) {toddler.style.left = 104 + 'px';} 别的 {toddler.style.left = currentPosition + 'px';}};scrollContainer.onmousemove = 函数(事件){获取坐标(事件)；控制台日志()；};toddler.ondragstart = 函数(){返回假；};/* toddler.onmouseup = function() { */window.onmouseup = 函数(){scrollContainer.onmousemove = null;scrollContainer.onmouseup = null;toddler.onmouseup = null;toddler.onmousemove = null;返回假；};}toddler.addEventListener('mousedown',letsMove);

<头><meta charset="utf-8"><风格>#scrollContainer {宽度:400px；高度:200px；边框:1px 纯灰色；边框半径:4px；}#滚动条{宽度:200px；高度:5px；背景颜色:灰色；边框:1px 纯灰色；边框半径:4px；保证金最高:24%；左边距:24%；}#学步的儿童 {宽度:10px；高度:25px；位置:绝对；边距顶部:-11px；背景颜色:蓝色；边框:1px 纯灰色；边界半径:2px；光标:指针；}</风格><身体><div id="scrollContainer"><div id="scrollBar"><div id="幼儿"></div>

<脚本></html>

I have created a simle JS slider that reacts to the click by eventListener onmousedown. But if you will run the code below, you will see, that the toddler does not stop correctly by the eventListener onmouseup if we leave the scroll zone scrollContainer with holding the left mouse button. The toddler will scroll loosely under we will click directly on the him.

What is needed - the toddler must stop when we will release the left mouse button (after end eventListener onmousedown).

I will be grateful for help.

		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>

解决方案

The fix for this is almost embarrassingly simple. The reason you're not getting the onmouseup fired when the mouse isn't over the "toddler" is quite literally because the mouse isn't over the "toddler". (mouse events won't fire for objects that the mouse pointer is not touching).

Simply change the listener to the entire window (in "real" code you may want to add a guard so that you're aware of which slider is expecting the mouse up).

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>

这篇关于onmouseup 事件对滑块无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！