Обработчик событий для clickable image

Question

У меня есть эта функция, которая запускается при нажатии ссылки. Но, похоже, проблема в этом. Когда я использую текст для той же ссылки. Функция, похоже, выполнена хорошо. Но вместо этого, когда я помещаю изображение в одно и то же место. Функция обработчика событий, похоже, не работает.

Я создал скрипку для этого: http://jsfiddle.net/bkvirendra/5QqUB/

При щелчке на ссылке список уль показан. И когда пользователь нажимает где-нибудь вместо ссылки, список ul исчезает. Итак, когда я помещаю изображение вместо текста, оно, похоже, не работает! Как показать тот же список ul при щелчке изображения?

Answer 1

Проблема заключается в том, что, когда вы нажимаете изображение, цель события становится тегом img, а не тегом a.

Попробуйте это:

$(".item").hide(); 
$("#a").click(function(e) { 
    e.stopPropagation(); 
    $(".item").show(); 
}); 

$(document).click(function() { 
    $(".item").hide(); 
}); 

Example fiddle

Вы должны также рассмотреть вопрос о снятии $(".item").hide() линии и используя display: none в CSS вместо этого.

Answer 2

Это происходит потому, что e.target возвращает элемент с щелчком, поэтому он возвращает изображение. Попробуйте этот код:

$("html").click(function(e) { 
    if (e.target == document.getElementById("a") || e.target.nodeName=='IMG') { 
     $(".item").show(); 
     //alert(1); 
    } else { 
     $(".item").hide(); 
     //alert(2); 
    } 
});​