从外部函数绑定事件监听器

Question

我如何从我的 init 函数外部触发 init 中的重置函数。

我希望我的重置函数重置所有从绑定了 3 次的图像集合（在本例中为 3 个）设置的变量。我知道我这里的例子不起作用。

这是我的代码：

    document.getElementsByClassName('zoomer-start')[0].addEventListener('click', init);

    document.getElementsByClassName('zoomer-reset')[0].addEventListener('click', reset);

    function init() {
        var images = document.querySelectorAll('.zoomer-img');

        for (var i = 0; i < images.length; i++) {
            (function() {
                var image = images[i];

                var zoomer = new Hammer(image);

                zoomer.get('pinch').set({enable: false});
                zoomer.get('pan').set({enable: false});

                var clicked = false;

                var adjustScale = 1;
                var adjustDeltaX = 0;
                var adjustDeltaY = 0;

                var currentScale = null;
                var currentDeltaX = null;
                var currentDeltaY = null;

                zoomer.on('tap', function (e) {
                    if (!clicked) {
                        zoomer.get('pinch').set({enable: true});
                        zoomer.get('pan').set({enable: true, direction: Hammer.DIRECTION_ALL});
                        clicked = true;
                    } else {
                        zoomer.get('pinch').set({enable: false});
                        zoomer.get('pan').set({enable: false});
                        clicked = false;
                    }

                    if (currentScale > 1) {
                        adjustScale = 1;
                        adjustDeltaX = 0;
                        adjustDeltaY = 0;
                    } else {
                        adjustScale = 2;
                    }

                    currentScale = adjustScale * e.scale;
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('pan pinch', function (e) {
                    currentScale = Math.max(1, Math.min(adjustScale * e.scale, 4));
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    var scaledX = ((((image.width * currentScale) / 2) - (image.width / 2)) / currentScale);
                    if (currentDeltaX > scaledX)
                        currentDeltaX = scaledX;
                    if (currentDeltaX < -scaledX)
                        currentDeltaX = -scaledX;

                    var scaledY = ((((image.height * currentScale) / 2) - (image.height / 2)) / currentScale);
                    if (currentDeltaY > scaledY)
                        currentDeltaY = scaledY;
                    if (currentDeltaY < -scaledY)
                        currentDeltaY = -scaledY;

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('panend pinchend', function () {
                    adjustScale = currentScale;
                    adjustDeltaX = currentDeltaX;
                    adjustDeltaY = currentDeltaY;
                });

                function reset() {
                    zoomer.get('pinch').set({enable: false});
                    zoomer.get('pan').set({enable: false});

                    clicked = false;

                    adjustScale = 1;
                    adjustDeltaX = 0;
                    adjustDeltaY = 0;

                    currentScale = null;
                    currentDeltaX = null;
                    currentDeltaY = null;

                    image.style.transform = 'scale(' + 1 + ') translate3d(' + 0 + 'px, ' + 0 + 'px, 0)';
                }
            })();
        }
    }

Answer 1

将你的函数放在 init 函数中只给它们私有范围（只能从 init 函数中访问）要给它们全局范围，你必须将它们移到 init 函数之外，这将需要一些代码重组.

Answer 2

使用编写的代码，您不能。 reset 函数完全私有于 init 内的匿名函数中的代码。甚至 init 中的其他代码也无法访问它，更不用说外部 init.

中的代码了

我在上面说 "it"，但实际上，您有多个 reset 函数，每个图像一个。

当然，您可以将尝试将其用作点击处理程序的代码 移动到 init 中的匿名函数中。这基本上是你唯一真正的选择，而不是创建一个数组或类似的 reset 函数，你在 init.

之外公开

Answer 3

要从 inn 范围内调用函数，您必须以某种方式将其传递到周围范围。您的代码的一个可能示例：

var resets = [];
function init() {
[...]
    for (var i = 0; i < images.length; i++) {
        (function() {
            [...]
            resets[i]=function reset() {
            [...]
            })

然后天真地称呼他们：

resets[0](); resets[1](); resets[2];

或通过：

resets.forEach(function(f) { f(); } );

Answer 4

谢谢大家，我今天学到了一些东西！这是我的工作示例。真的很整洁：

    var resets = [];

    document.getElementsByClassName('zoomer-start')[0].addEventListener('click', init);

    document.getElementsByClassName('zoomer-reset')[0].addEventListener('click', function () {
        var images = document.querySelectorAll('.zoomer-img');

        for (var i = 0; i < images.length; i++) {
            resets[i]();
        }
    });

    function init() {
        var images = document.querySelectorAll('.zoomer-img');

        for (var i = 0; i < images.length; i++) {
            (function(i) {
                var image = images[i];

                var zoomer = new Hammer(image);

                zoomer.get('pinch').set({enable: false});
                zoomer.get('pan').set({enable: false});

                var clicked = false;

                var adjustScale = 1;
                var adjustDeltaX = 0;
                var adjustDeltaY = 0;

                var currentScale = null;
                var currentDeltaX = null;
                var currentDeltaY = null;

                zoomer.on('tap', function (e) {
                    if (!clicked) {
                        zoomer.get('pinch').set({enable: true});
                        zoomer.get('pan').set({enable: true, direction: Hammer.DIRECTION_ALL});
                        clicked = true;
                    } else {
                        zoomer.get('pinch').set({enable: false});
                        zoomer.get('pan').set({enable: false});
                        clicked = false;
                    }

                    if (currentScale > 1) {
                        adjustScale = 1;
                        adjustDeltaX = 0;
                        adjustDeltaY = 0;
                    } else {
                        adjustScale = 2;
                    }

                    currentScale = adjustScale * e.scale;
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('pan pinch', function (e) {
                    currentScale = Math.max(1, Math.min(adjustScale * e.scale, 4));
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    var scaledX = ((((image.width * currentScale) / 2) - (image.width / 2)) / currentScale);
                    if (currentDeltaX > scaledX)
                        currentDeltaX = scaledX;
                    if (currentDeltaX < -scaledX)
                        currentDeltaX = -scaledX;

                    var scaledY = ((((image.height * currentScale) / 2) - (image.height / 2)) / currentScale);
                    if (currentDeltaY > scaledY)
                        currentDeltaY = scaledY;
                    if (currentDeltaY < -scaledY)
                        currentDeltaY = -scaledY;

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('panend pinchend', function () {
                    adjustScale = currentScale;
                    adjustDeltaX = currentDeltaX;
                    adjustDeltaY = currentDeltaY;
                });

                resets[i] = function reset() {
                    zoomer.get('pinch').set({enable: false});
                    zoomer.get('pan').set({enable: false});

                    clicked = false;

                    adjustScale = 1;
                    adjustDeltaX = 0;
                    adjustDeltaY = 0;

                    currentScale = null;
                    currentDeltaX = null;
                    currentDeltaY = null;

                    image.style.transform = 'scale(' + 1 + ') translate3d(' + 0 + 'px, ' + 0 + 'px, 0)';
                }
            })(i);
        }
    }

从外部函数绑定事件监听器

Bind event listener from outside function

javascript

hammer.js