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

【问题标题】：Event handler for Clickable image可点击图像的事件处理程序
【发布时间】：2012-05-26 21:46:45
【问题描述】：

我有这个函数，当一个链接被点击时会被执行。但这似乎有问题。当我对同一个链接使用一些文本时。该功能似乎执行得很好。但是，当我将图像放在同一个地方时。事件处理函数似乎不起作用。

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

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

【问题讨论】：

标签： javascript jquery javascript-events event-handling

【解决方案1】：

问题是因为当你点击图片时，事件目标变成了img标签，而不是a标签。

试试这个：

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

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

Example fiddle

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

【讨论】：

【解决方案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);
    }
});

【讨论】：