是否有一种方法可以在鼠标悬停直到满足某一条件时运行函数？

Question

function increase (element) {
    count = Number(element.innerText)
    count += 1
    element.innerText = count
}
function decrease (element) {
    count = Number(element.innerText)
    count -= 1
    element.innerText = count
}

    <div class="textbox textbox-1" id="textboxjs1" onmouseover="decrease(textboxEl2),decrease(textboxEl3),decrease(textboxEl4),decrease(textboxEl5),decrease(textboxEl6)"> < Prev </div>
    <div class="textbox textbox-2" id="textboxjs2" onclick="increase(textboxEl2)"> 1 </div>
    <div class="textbox textbox-3" id="textboxjs3" onclick="increase(textboxEl3)"> 2 </div>
    <div class="textbox textbox-4" id="textboxjs4" onclick="increase(textboxEl4)"> 3 </div>
    <div class="textbox textbox-5" id="textboxjs5" onclick="increase(textboxEl5)"> 4 </div>
    <div class="textbox textbox-6" id="textboxjs6" onclick="increase(textboxEl6)"> 5 </div>
    <div class="textbox textbox-7" id="textboxjs7" onmouseover="increase(textboxEl2), increase(textboxEl3), increase(textboxEl4), increase(textboxEl5), increase(textboxEl6)"> Next > </div>

你好，有什么办法可以让我的数字上升，而我保持我的鼠标徘徊在“下一步”按钮？这是我想出来的代码，但它只增加了一次，当我的鼠标进入这个区域时，我想让它不断增加，直到我把鼠标拿出来，我怎么能做到呢？希望这不会太麻烦，我只有2天的编程时间:)

Answer 1

您需要使用onmouseenter和onmouseleave事件处理程序以及setInterval和clearInterval计时器函数。

​

const textboxEl2 = document.getElementById('textboxjs2');
const textboxEl3 = document.getElementById('textboxjs3');
const textboxEl4 = document.getElementById('textboxjs4');
const textboxEl5 = document.getElementById('textboxjs5');
const textboxEl6 = document.getElementById('textboxjs6');
let decrementTimer = null;
let incrementTimer = null;

function increase(element) {
    count = Number(element.innerText)
    count += 1
    element.innerText = count
}

function decrease(element) {
    count = Number(element.innerText)
    count -= 1
    element.innerText = count
}

function decreaseAll() {
    decrease(textboxEl2);
    decrease(textboxEl3);
    decrease(textboxEl4);
    decrease(textboxEl5);
    decrease(textboxEl6);
}

function increaseAll() {
    increase(textboxEl2);
    increase(textboxEl3);
    increase(textboxEl4);
    increase(textboxEl5);
    increase(textboxEl6);
}

function decrementMouseEnterHandler() {
    decrementTimer = setInterval(function aMomentLater() {
        decreaseAll();
    }, 100);
}

function decrementMouseLeaveHandler() {
    clearInterval(decrementTimer);
}

function incrementMouseEnterHandler() {
    incrementTimer = setInterval(function aMomentLater() {
        increaseAll();
    }, 100);
}

function incrementMouseLeaveHandler() {
    clearInterval(incrementTimer);
}

<div class="textbox textbox-1" id="textboxjs1" 
  onmouseenter="decrementMouseEnterHandler()"
  onmouseleave="decrementMouseLeaveHandler()"
  >&#60; Prev</div>

<div class="textbox textbox-2" id="textboxjs2" onclick="increase(textboxEl2)"> 1 </div>
<div class="textbox textbox-3" id="textboxjs3" onclick="increase(textboxEl3)"> 2 </div>
<div class="textbox textbox-4" id="textboxjs4" onclick="increase(textboxEl4)"> 3 </div>
<div class="textbox textbox-5" id="textboxjs5" onclick="increase(textboxEl5)"> 4 </div>
<div class="textbox textbox-6" id="textboxjs6" onclick="increase(textboxEl6)"> 5 </div>

<div class="textbox textbox-7" id="textboxjs7" 
    onmouseenter="incrementMouseEnterHandler()"
    onmouseleave="incrementMouseLeaveHandler()"
  >Next &#62;</div>

​

这是一个小提琴。

Answer 2

我制作了一个演示示例，演示如何实现启动/停止增量/减少dom元素中包含的数字的逻辑。

每个div都有两个事件处理程序：mouseover和mouseout。

当鼠标在.target元素上时，它开始在给定的时间间隔(由speed定义)递增其内容，定时器被存储在元素本身的特定数据属性中。

当鼠标离开一个.target元素时，它的计时器会从它的数据属性中被检索出来，并被清除，这样它就不会在下一次迭代中运行了。

当带有.next和.prev类的div是要悬停的元素时，增量/递减特性将针对所有的.target div，而不仅仅是一个。

这个版本比我之前展示的稍微复杂一些，但它涵盖了整个故事，包括递减，并将timer函数与如何获取上下文分离开来。

来自MDN：

• 鼠标退出事件
• 滑鼠事件
• timeInterval

​

//milliseconds between each timer steps
const speed = 100;

//adds event handlers for all divs matching .target, .next and .prev
const targetDivs =
  document.querySelectorAll('.target, .next, .prev');
for(let e of targetDivs){
  e.addEventListener('mouseover', startTimer);
  e.addEventListener('mouseout', stopTimer);
}

//increases the number contained inside the elements passed
function increase(elements) {
  for(let element of elements){
    let count = parseInt(element.innerText);
    element.innerText = ++count;
  }
}

//decreases the number contained inside the elements passed
function decrease(elements) {
  for(let element of elements){
    let count = parseInt(element.innerText);
    element.innerText = --count;
  }
}

function startTimer(){
  let c = grabContext(this);
  let t = setInterval( () => c.functionToCall(c.targets), speed );
  this.setAttribute('data-timer', t);
}

function stopTimer(){
  let t = this.getAttribute('data-timer');
  clearInterval(t);
}

//Grab the context for a given element (it's a next/prev/target?)
function grabContext(element){
  
  //classList of this element
  let classList = element.classList;
  //elements to be targeted
  let targets = [];
  //function to be called bound to this element
  let functionToCall;
  
  //if the element contains .next in its class
  if( classList.contains('next') ){
    targets = document.querySelectorAll('.target');
    functionToCall = increase;
  }
  //if the element contains .prev in its class
  else if( classList.contains('prev') ){
    targets = document.querySelectorAll('.target');
    functionToCall = decrease;
  }
  //else
  else{
    targets = [element];
    functionToCall = increase;
  }
  
  return {
    targets: targets,
    functionToCall: functionToCall
  }
}

.textbox{
  border: solid 1px black;
  width: 10em;
  margin-bottom: 1em;
  cursor: pointer;
}

<div
  class="textbox prev textbox-1"
  id="textboxjs1"
  data-timerfunction="decrease">&lt; Prev</div>

<div class="textbox target textbox-2" id="textboxjs2">1</div>
<div class="textbox target textbox-3" id="textboxjs3">2</div>
<div class="textbox target textbox-4" id="textboxjs4">3</div>
<div class="textbox target textbox-5" id="textboxjs5">4</div>
<div class="textbox target textbox-6" id="textboxjs6">5</div>

<div class="textbox next textbox-7" id="textboxjs7">
Next &gt;
</div>

​