0

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

我想按下一个按钮，它会立即触发一个函数，例如 MyZoom(InOrOut)。

但是，如果我按住鼠标按钮，它将每隔十分之一秒触发一次 MyZoom(InOrOut)，直到我松开鼠标按钮。

正如您可能从函数名称中猜到的那样，我将有 2 个按钮，一个放大和一个缩小。他们将调用 MyZoom(-1) 使其更小，调用 MyZoom(1) 使其更大。

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

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

4

2 回答 2

2

使用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 属性来识别按钮。

于 2012-04-21T12:27:00.277 回答
1

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

你可以有这样的东西：

$('#myzoominbutton').mousedown(function() {
  alert('zooming is cool');
});
于 2012-04-21T12:29:47.960 回答