Javascript: Получение onClick на верхней части изображения внутри div, это можно сделать?

Question

У меня в основном есть div, настроенный с действием onClick следующим образом:

myDiv.setAttribute("onclick", myAction);

А позже я помещаю изображение в div следующим образом:

myDiv.innerHTML = '<img src="' + myImage + '" height="' + myDiv.height + '" width="' + myDiv.width + '">';

.ширина иheight - это свойства, которые я создал для myDiv.

Так что моя проблема в том, что когда я помещаю изображение в div, myCiv onClick не отвечает, есть ли способ решить эту проблему.Я знаю свойство div backgroundImage, но оно не поддерживает настройку размера во всех браузерах.Я пытался придать изображению то же действие onClick, которое имеет div, но оно только запуталось, есть ли способ заставить javascript игнорировать изображение и зарегистрировать щелчок в div, даже если щелчок находится на изображении внутри div?

Визуальное объяснение проблемы:

http://bildr.no/view/860258

Спасибо.

Answer 1

Вместо того, чтобы перезаписывать innerHTML div, почему бы не сделать что-то подобное?

var img = document.createElement('img');
img.setAttribute('src', myImage);
img.setAttribute('width', myDiv.width);
img.setAttribute('height', myDiv.height);
myDiv.appendChild(img);

Answer 2

Да, и вы ищете распространение событий. Библиотека JS, такая как jQuery, может быть очень полезна для чего-то подобного. jQuery использует функцию .live() для распространения событий.

Для заданного HTML:

<div class="imageWrap">
    <img src="someimage.jpg">
</div>

Вы бы использовали что-то вроде:

$(".imageWrap").live("click", function (event) {
    // Do something awesome here
    $(event.target).addClass("clicked");
});

Клик по изображению должен «распространяться» или пузыриться до div, где его можно поймать и обработать. Пузырьки событий невероятно полезны, когда вы поймете, как они работают.

Answer 3

Я нашел вашу проблему.

Вот скрипка: http://jsfiddle.net/maniator/gN4e9/

Проблема в этой строке: myDiv.setAttribute("onclick", myAction);

То есть помещает целую функцию myAction в клик, который вам не нужен.

Измените его на: myDiv.setAttribute("onclick", 'myAction()'); и оно должно работать нормально.

Answer 4

Первое, о чем я подумал, было Разве события не всплывают? Я начал поиск и обнаружил это .Я думаю, что это может быть интересное чтение.