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

Example fiddle

您还应该考虑删除$(".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);
    }
});

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

2 个答案: