Question

我目前正在尝试让我的网页对移动设备和标签页面更加友好，我遇到了这个问题：

我想要一个按钮来增加按钮按下时的文本框值（onmousedown）。所以我创建了这样的按钮：

<span 
    class="glyphicon glyphicon-resize-full textIconBoxControll" 
    aria-hidden="true" 
    onmousedown="inter=setInterval(increaseFont, 300);"
    onmouseup="clearInterval(inter);" 
    onmouseout="clearInterval(inter);"> 

</span>

现在，当我按下按钮时，它会开始调用increaseFont函数，但是当我释放按钮或将鼠标移出范围时它不会停止。如果我在浏览器控制台中键入它（inter =“setInter ..”和clearInterval（inter）;）它按预期工作。我担心这与使用html事件时“inter”所属的范围有关，但我似乎无法找到解决方案。我已经尝试在我的JS顶部创建一个名为inter的全局变量（不起作用）。

Answer 1

以下是使用onmousedown和onmouseup的示例（您可能希望使用ontouchstart / ontouchend）：

<button type='button' id='bigger'>Bigger</button>
<button type='button' id='smaller'>Smaller</button>
<br/>
<input type='text' id='num' value='5'/>

window.onload = function ol(){
    var bigger = document.getElementById('bigger'),
        smaller = document.getElementById('smaller'),
        num = document.getElementById('num'),
        max_num = 16.0,
        min_num = 5.0,
        speed = 30,
        step = .1,
        itv;

    bigger.onmousedown = go_bigger;
    bigger.onmouseup = reset;
    smaller.onmousedown = go_smaller;
    smaller.onmouseup = reset;

    function reset() {
        clearInterval(itv);
    }

    function go_bigger(){
        reset();

        itv = setInterval(function o(){
            var val = parseFloat(num.value, 10);

            if (val >= max_num) {
                reset();

                return;
            }

            val = Math.round((val + step) * 100) / 100;
            num.value = val;
            num.style.fontSize = val + 'px';
        }, speed);
    }

    function go_smaller(){
        reset();

        itv = setInterval(function o(){
            var val = parseFloat(num.value, 10);

            if (val <= min_num) {
                reset();

                return;
            }

            val = Math.round((val - step) * 100) / 100;
            num.value = val;
            num.style.fontSize = val + 'px';
        }, speed);
    }
};

http://jsfiddle.net/vcbhpzds/

我无法使用onmouseup清除onmousedown设置的间隔

1 个答案: