可单击图像的事件处理程序

Question

我有这个函数，当点击链接时会执行。但这似乎有问题。当我为同一链接使用一些文本时。

该函数似乎执行得很好，但除了我将图像放在同一个地方时，然后事件处理程序函数似乎不起作用。

我为这个创建了一个小提琴：http://jsfiddle.net/bkvirendra/5QqUB/

单击链接时，将显示 ul 列表。当用户单击任何地方而不是链接时，ul列表就会消失。因此，当我放置图像而不是文本时，它似乎不起作用！点击图片时如何显示相同的 ul 列表？

Answer 1

这是因为当您单击图像时，事件目标将成为img标记，而不是a标记。

试试这个：

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

示例小提琴

您还应该考虑删除$(".item").hide()行并在 CSS 中使用display: none。

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