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

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

转载作者：行者123 更新时间：2023-11-30 20:47:48

25

4

我创建了一个简单的 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

文章推荐： javascript - 单击项目时固定导航栏不折叠(小屏幕设备)

文章推荐： c# - 在 wpf 应用程序中初始化功能区控件时出错

文章推荐： c# - Pechkin 生成的 PDF 中不呈现背景颜色

文章推荐： c - 为什么需要转换字符？

没有按住的Javascript onmouseUp
我已经在 mouseUp 上设置了事件监听器。我想在短时间内(只需单击)onmouseUp 和按住后的 onmouseUp 之间进行区分，让我们说超过一秒或 onmouseDown 与 mouseM
Javascript 全局变量始终未定义 onmouseup
我有几个全局变量被设置为 $(this)在小 1 或 2 按钮的 mouseup 上。基于 mouseup 上全局变量的比较，我的代码应该做一些事情。当我在 Firebug 中单步执行代码时，变量被设
Javascript onmouseup 事件未按预期触发
我正在开发一个 tilemap 构造器应用程序，它使用类似绘画的功能来选择一个图 block (来自图像元素的 src)并使用 mouseup 和 mousedown 绘制它事件处理程序。无论出于何
javascript - onmouseup 事件未触发
我有一个包含 IFrame 的文档(所有源项目都来自同一个域)，当我将 onmouseup 事件附加到我的 IFrame 中的一个 div 时，它会在我的鼠标抬起时触发，无论我是否还在我光标所在的元素
javascript - onmousedown/onmouseup 功能不起作用
我有一个矩形，我正在尝试使用 javascript 移动它。我可以使用函数让它左右移动，但是当我按住鼠标时它不会继续移动。这是我的 html 代码: LEFT RIGHT 这是我的 JavaScrip
javascript - 合并 OnMouseUp/Down 功能？
我有一个working tool (请参阅第一个代码块)，我想在其中包含单击并按住功能。我想在按住左按钮时快速加，在按住右按钮时快速减。就像它已经具有的单击功能一样，但是是一个更快的选项。我是一个
delphi - TStringGrid - OnMouseUp 未被调用!
我在 Delphi 7 中的 TStringGrid 有一个奇怪的行为。如果弹出菜单与网格关联，Delphi 不会调用 OnMouseUp 事件。基本上，当按下人民币时，菜单的弹出会以某种方式取消/延
javascript - onmousedown/onmouseup 功能不起作用
我有一个矩形，我正在尝试使用 javascript 移动它。我可以使用函数让它左右移动，但是当我按住鼠标时它不会继续移动。这是我的 html 代码: LEFT RIGHT 这是我的 JavaScrip
javascript - onmouseup 事件不能正确作用于 slider
我创建了一个简单的 JS slider ，它对 eventListener 的点击使用react onmousedown .但是如果你运行下面的代码，你会看到，toddler没有被 eventList
javascript - 使用 onmouseup 删除选项的选择
我想在不删除选项的情况下删除选择。代码如下所示: item 1 如果我在 HTML 中添加一个链接: Remove selection 并且使用 jQuery 一切正常: $('.r
javascript - onmouseup + h2 不起作用
我需要一些帮助: 当我点击最后一个 h2 元素时，我试图移动到另一个页面，但发生的情况是它正在处理所有 h2 元素。事情是这样的: function ini(){ docu
javascript - 正确触发 onmouseup 元素
我有以下 html 结构: high light me with mouse!! highlight me with mouse
javascript - onmouseup 或 addEventListener
我有一个问题，我还没有找到答案。当我使用此方法捕获鼠标松开事件时: 这是否比这种新方法更有效: document.getElementById("Id").addEventListener("
javascript - 如何在 onmouseup 上获取坐标？
我构建了一个 javascript 应用程序，用于在同一页面中将 div 从一个地方拖放到另一个地方。我已经制作了拖动部分。我有 div 的坐标，我必须在其中放下 div，但我被困在应该引入条件以匹配
javascript - 为什么 onMouseUp 没有触发？
我有一个 div，其中设置了一个 onMouseUp 事件(在 HTML 中)。在该 div 中有许多元素，其中一些包含我想要拖动的 handle 图标。图标有一个 onMouseDown 事件。当
javascript - 结束 onmousedown 事件(onmouseup？)
我使用 onmousedown 事件创建了一个按钮，单击该事件时会循环播放音轨。我试图在单击同一按钮时结束音频循环。我尝试过 onmouseup 事件，但没有运气，有什么想法吗？ (我是 JavaSc
javascript - 是否有多个 onmouseup 事件处理程序有效的 html？
我在 JSP 中重构一些 html，我注意到代码有一个按钮的多个 onmouseup 属性。这是有效的 html 吗，它似乎有效，但它是否有效？最佳答案 Yes ，您可以有多个事件监听器，不，使用
javascript - onmouseup 在 safari 中不起作用
这是我从 w3schools 获得的示例，我在其中单独使用 safari 浏览器时会出现奇怪的行为。 http://www.w3schools.com/jsref/tryit.asp?filename
javascript - React 无法触发 window.onmouseup
我有一个 slider 组件，它应该在鼠标抬起后停止移动。我浏览过论坛，我的代码与 here 非常相似 const Slider = ({ mainColour }) => { const [cu
html - 触摸屏设备是否支持 onmousedown 和 onmouseup？
我只是想问一下在部署时触摸屏移动设备是否支持 onmouseup 和 onmousedown 事件。我这里有这段代码: 而且我不确定该设备是否支持这些。我无法测试它，因为我还没有设备。如果不是，

首页

博学

6Ren·AI

商城

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