javascript - 可点击图像的事件处理程序

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