javascript - 在文档上触发 div mousemove

Question

我有一个 slider ，当单击按住并移动时会增加宽度。

但是一旦我将鼠标移出 slider ，它就不再运行。

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

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);
}

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%;
}

<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>

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

Answer 1

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

查看代码片段:

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>