Как ловить клики на нескольких изображениях?

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

Добавьте прослушиватель события click к родительскому элементу изображений. Это может быть элемент тела. Передайте событие в качестве аргумента. Затем проверьте событие и используйте эту переменную, чтобы внести изменения в ваше изображение.

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