Question

我有一个滑块，可以在点击并移动时增加宽度。

但是，只要我将鼠标移到滑块之外，它就不会再运行了。

当我将鼠标移到slider-container之外时，如何让它也能运行？

＆＃13;

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
	var rect = el.getBoundingClientRect(),
		scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
		scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};
var mymousemove = function(e) {
    var x = e.pageX; 
    var sliderC = e.currentTarget;
    if(parseInt(sliderC.getAttribute("isMousedown")) == 1){   
      var width = e.pageX - offset(sliderC).left;
      sliderC.querySelector('.slider').style.width = width+'px';
    }
};
var mymousedown = function(e) {
   var sliderC = e.currentTarget;
   sliderC.setAttribute("isMousedown",1);
}
var mymouseup = function(e) {
   var sliderC = e.currentTarget;
   sliderC.setAttribute("isMousedown",0);
}

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mousemove',mymousemove, false);
    classname[i].addEventListener('mousedown',mymousedown, false);
    classname[i].addEventListener('mouseup',mymouseup, false);
}

＆＃13;

body{
  user-select: none;
}
.slider-container{
  width:200px;
  border:4px solid black;
  height:100px;
  display: inline-block;
  margin: 10px;
}
.slider{
  width:0;
  background:#f00;
  height: 100%;
}

＆＃13;

<div class="slider-container">
<div class="slider">
</div>
</div>
<div class="slider-container">
<div class="slider">
</div>
</div>
<br />
<br />
<h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

＆＃13;

https://jsfiddle.net/d8pqjb5t/3/

Answer 1

将鼠标事件侦听器绑定到slider-container对象。一旦你离开滑块区域，它们就不会再发射了。

我建议你将mousedown still绑定到你的滑块容器，但是让mousemove和mouseup全局处理。在此期间，您将缓存使用mousedown命中的滑块元素，并将鼠标移动的每个效果应用于该元素。再次鼠标添加后，您将从缓存中删除该元素，这样就不会发生冲突。

你甚至可以摆脱那种尴尬的“isMouseDown＆＃39;属性。

修改后的代码在这里：

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};

var mymousemove = function(e) {
  if (currentSlider) {
    var x = e.pageX; 

    var width = e.pageX - offset(currentSlider).left;
    if (width < 0) width = 0;
    if (width > 200) width = 200;
    currentSlider.querySelector('.slider').style.width = width+'px';
  }
};
var currentSlider;
var mymousedown = function(e) {
  currentSlider = e.currentTarget;
}
var mymouseup = function(e) {
  if (currentSlider) {
    currentSlider = null;
  }
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown',mymousedown, false);
}
document.addEventListener('mousemove',mymousemove, false);
document.addEventListener('mouseup',mymouseup, false);

可以找到更新的小提琴here。

从现在开始，鼠标指针可以位于屏幕的任何位置，您必须限制内部容器可以设置的宽度。

我从0到200（硬件容器的大小范围）进行了硬编码，但这当然可以更动态地完成。

Answer 2

我在你的代码中改变了一些东西，基本上我在文档上添加了一个事件监听器来实现你想要的东西

请参阅代码段：

var classname = document.getElementsByClassName("slider-container");

const offset = function(el) {
  var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {
    top: rect.top + scrollTop,
    left: rect.left + scrollLeft
  }
};

var mymousedown = function(e) {
  var sliderC = e.currentTarget;
  sliderC.setAttribute("isMousedown", 1);

  document.addEventListener('mousemove', function() {
    var e = window.event;
    var x = e.clientX;
    if (parseInt(sliderC.getAttribute("isMousedown")) == 1) {
      var width = e.clientX - offset(sliderC).left;
      sliderC.querySelector('.slider').style.width = width + 'px';
    }
  }, false);

  document.addEventListener('mouseup', function() {
    sliderC.setAttribute("isMousedown", 0);
  }, false);
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown', mymousedown, false);
}

body {
  user-select: none;
}

.slider-container {
  width: 200px;
  border: 4px solid black;
  height: 100px;
  display: inline-block;
  margin: 10px;
}

.slider {
  width: 0;
  background: #f00;
  height: 100%;
  max-width: 100%;
}

<div class="slider-container">
  <div class="slider">
  </div>
</div>
<div class="slider-container">
  <div class="slider">
  </div>
</div>
<br />
<br />
<h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

在文档上触发div mousemove

2 个答案: