Получение связанного img из области HTML

Question

Два элемента img используют одну и ту же карту с одной областью. Теперь мы связываем, например, обработчик события click для элемента area . Можно ли определить из обработчика событий, какой экземпляр изображения был нажат?

Answer 1

Да, вы можете определить, по какому изображению щелкнули:

1. присоединение одного обработчика события на родительском элементе и проверка свойство event.target
2. прикрепление отдельных обработчиков событий на каждом элементе изображения.

Например, если ваш HTML выглядит так:

<div id="container">
    <img id="myimage1" usemap="theMap" />
    <img id="myimage2" usemap="theMap" />
    <map name="theMap">
    ...
    </map>
</div>

тогда возможны следующие решения:

1)

document.getElementById('container').onclick = function(evt) {
    var target = evt.target || window.event.srcElement;

    switch(target.id) {

        case 'myimage1':
            alert('you clicked on myimage1');
            break;

        case 'myimage2':
            alert('you clicked on myimage2');
            break;

        default:
            // click handler got some other evet
    }
}

2)

document.getElementById('myimage1').onclick = function() {
    alert('you clicked on myimage1');
}
document.getElementById('myimage2').onclick = function() {
    alert('you clicked on myimage2');
}

В зависимости от того, что вы хотите сделать после захвата события, вам придется вернуть либо «true», чтобы разрешить URL-адрес, либо «false», чтобы выполнить альтернативное действие.

Answer 2

Возможное решение - использовать свойство offsetParent . Таким образом, я получаю родителя, который был тем, что мне изначально было нужно. Найти само изображение также не должно быть слишком сложно, при условии, что изображения содержатся в разных div s.