如何捕获对多个图像的点击？

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);
    });

如何捕获对多个图像的点击？

How to catch clicks on multiple images?

javascript

jquery

uiwebview

imagemap