Question

我不知道该怎么称呼它，我能想到的只是一个转发器按钮。

我想按一个按钮，它立即触发一次功能，例如MyZoom（InOrOut）。

但是，如果我按下鼠标按钮，它将持续每隔十分之一秒触发MyZoom（InOrOut），直到我释放鼠标按钮。

正如您可以从功能名称中猜到的那样，我将有2个按钮，一个放大和一个缩小。他们将调用MyZoom（-1）使其变小，并调用MyZoom（1）使其变大。

<button onclick="MyZoom(-1);">Zoom Out</button>
<button onclick="MyZoom(1);">Zoom In</button>

如何更改此项以包含重复效果？

Answer 1

使用onmousedown和onmouseup事件。

在onmousedown开始一个时间间隔并在onmouseup中停止。

这是使用jQuery的一个小例子：

<强> HTML：

<button class="zoomButton" data-zoom="out">Zoom Out</button>
<button class="zoomButton" data-zoom="in">Zoom In</button>

<强> JavaScript的：

var zoomIntervals = {};
$('.zoomButton').on('mousedown', function() {
    var mode = $(this).data('zoom');
    zoomIntervals[mode] = setInterval(function() {
        // here you perform your action.
        // check if mode == 'in' or mode == 'out' to determine if
        // the user is zooming in or out
    }, 100);
}).on('mouseup', function() {
    var mode = $(this).data('zoom');
    clearInterval(zoomIntervals[mode]);
    del zoomIntervals[mode];
});

如果您不想（想）使用jQuery，请使用addEventListener()注册事件并直接访问数据属性（与旧浏览器不兼容）或使用例如用于标识按钮的ID属性。

Answer 2

我会使用jQuery。有一个名为mousedown的事件和另一个名为mouseup的事件可以帮助您做到这一点。基本上mousedown事件启动一个计时器（重复它），当触发mouseup事件时它会停止。

你可以这样：

$('#myzoominbutton').mousedown(function() {
  alert('zooming is cool');
});

重复按钮 - 如果你按下按钮，它会继续发射功能

2 个答案: