我有一个滑块,单击并按住时会增加宽度。
但是,一旦我将鼠标移出滑块,它就不再运行。
我将鼠标移到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/
最佳答案
我更改了代码中的一些内容,基本上我在文档上添加了一个事件监听器,以实现所需的功能
查看代码段:
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>