Question

因此，我是JS的初学者，并尝试找出此问题。我有这个HTML和JS

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>

如果单击它会增加，很简单。现在，我希望按钮具有以下特征：如果单击并按住按钮，则数字会自动增加直到放开按钮。我该怎么办？

Answer 1

您应该处理按钮的<?php function xmlObjToArr($obj) { $namespace = $obj->getDocNamespaces(true); $namespace[NULL] = NULL; $children = array(); $attributes = array(); $name = strtolower((string)$obj->getName()); $text = trim((string)$obj); if( strlen($text) <= 0 ) { $text = NULL; } // get info for all namespaces if(is_object($obj)) { foreach( $namespace as $ns=>$nsUrl ) { // atributes $objAttributes = $obj->attributes($ns, true); foreach( $objAttributes as $attributeName => $attributeValue ) { $attribName = strtolower(trim((string)$attributeName)); $attribVal = trim((string)$attributeValue); if (!empty($ns)) { $attribName = $ns . ':' . $attribName; } $attributes[$attribName] = $attribVal; } // children $objChildren = $obj->children($ns, true); foreach( $objChildren as $childName=>$child ) { $childName = strtolower((string)$childName); if( !empty($ns) ) { $childName = $ns.':'.$childName; } $children[$childName][] = xmlObjToArr($child); } } } return array( 'name'=>$name, 'text'=>$text, 'attributes'=>$attributes, 'children'=>$children ); }和mousedown事件。

在mouseup上，启动一个计时器（setInterval）以定期调用增量值。在mousedown上，停止计时器。

mouseup

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

var timer;
function start() {
    timer = setInterval(incrementValue, 100);
}
function stop() {
    clearInterval(timer);
}

Answer 2

使用mousedown和mouseup事件而不是click事件。

在mousedown上开始一个间隔，然后在mouseup上将其清除。

您可能希望为mouseout添加一些检查，以防在按住按钮的同时移动鼠标。

Answer 3

第1步：

您将事件onmousedown绑定到按钮，并使其执行setInterval()，以您希望的速度增加值。

第2步：

您将事件onmouseup绑定到按钮，当用户释放保留时，按钮将执行clearInterval()以停止间隔。

Answer 4

我有解决方案供您在mousedown事件中使用，我将使用Jquery： HTMl

<button>My Button</button>
<div> </div>

JavaScript：

var number = 0;
var isMouseDown = false;
$('button').mousedown(function(){
  isMouseDown = true;
  if(isMouseDown){
    var addNumber = setInterval(function(){
    number++;
    $('div').html(number) ;
  }, 100)
  }
  $('html').mouseup(function(){
    isMouseDown = false;
    clearInterval(addNumber)
  })
})

单击并按住按钮时如何触发单击事件/重复调用函数

4 个答案: