如何捕获多张图片的点击？

Question

我有一个iOS uiwebview，其中包含多个图像图，需要捕获点击，因此我可以在不同的iOS设备上进行缩放。我安装的点击处理程序可在第一个图像上使用，但不能在后续图像上使用。如何使点击处理程序可在多个图像上使用？相关代码如下：

$.fn.imageMapSetup2 = function () {
    $('img').each(function () {
        if (typeof ($(this).attr('usemap')) == 'undefined') {
            return;
        }
        var img = $(this);

        // add click handler
        img.on('click', function (event) {
            img.imgClick(event);
        });
    });
};

$.fn.imgClick = function (mouseDown) {
    mouseDown.preventDefault();
    var $img = this;
    var map = $img.attr('usemap').replace('#', '');
    $('map[name="' + map + '"]').find('area').each(function () {
        var $this = $(this),
            coords = $this.attr('coords').split(',');
        // lots of scaling code omitted 
        if (mouseX >= left && mouseX <= right &&
            mouseY >= top && mouseY <= bottom) {
            window.location = $this.attr('href');
        }
    });
};

仅供参考，我已经在Safari中调试了代码，并且第二张及后续图像未调用function imgClick()。

Answer 1

将点击事件侦听器添加到图像的父元素。这可能是身体元素。将事件作为参数传递。然后，检查事件，并使用该变量对图像进行更改。

    document.addEventListener("click", function (event) {
      if (!event.target.tagName === "img") return;
      if (typeof event.target.getAttribute("usemap") == "undefined") {
        return;
      }
      imgClick(event);
    });