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

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

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

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