Javascript 制作事件的标记目标，而不是img

这可能是javascript 101，但我想不出一个解决方案。考虑

My js使用class

.show modal

但我的控制台日志显示事件目标实际上是img标记。由于各种原因，我需要将事件目标作为标记

关于这一点，我面临两个挑战：

我成功地将事件目标设置为a标记的唯一方法是将img标记从其外部分离（即，使其成为a标记的兄弟，不再是子标记），然后设置a标记位置：绝对，在img上为其指定尺寸和位置。我认为这种方法必须是最不可取的，但我如何才能实现我的目标呢

真正让我困惑的是，事件目标与我附加单击事件的元素有何不同？它们不应该是一样的吗？如果它们应该是相同的，那么如果接收单击事件的元素不是我将单击事件附加到的元素，如何调用我的函数

---

您可以使用

此

而不是目标：

使用

e.currentTarget

——给出事件绑定到的元素。（也可以使用此）

e.target

——给出触发事件的元素

这里的问题是你的形象几乎完全占据了锚。因此，

anchor

标记永远不会是

e.target

查看一个高度不同的示例

---

事件目标是触发事件的元素，而不一定是处理程序附加到的元素

单击图像时，事件向上传播到DOM树，触发绑定到锚定的

click

处理程序

---

如果需要

锚定

，可以使用

此

事件在

img

标记上触发，但侦听器的上下文是带有

show modal

类的标记，因此回调上下文将位于侦听器连接的位置：

$('.show-modal').on('click', function(e)
{
    console.log(e.target);
    console.log($(this));//the .show-modal tag
});

就这些。如果您发现自己正在委托事件，并且希望检查单击的元素是否是ID为x或类为Y的某个元素的子元素：

$(document).on('click','img',function(e)
{//this catches all clicks on all imgs in your page
    console($(this) === $(document));//true
    console.log(e.target);//img tag
    if ($(e.target).closest('.show-modal'))
    {
        console.log('yes, clicked image is child of .show-modal element'):
    }
});

---

我知道这与事件传播有关，我只是不完全确定它是如何运作的。我不认为我可以使用“this”，因为我需要确定单击了哪个标记，然后找到附加到它的特定数据属性。@max7：我很确定您可以使用

this

，它不会是目标，但它肯定是与单击的

img

相对应的

锚定。看一看这个，非常感谢你出色的小提琴！所以基本上，因为我绑定click处理程序的a标记在冒泡阶段截获事件，这允许我使用“this”并在a标记上获得正确的数据属性。。。我说得对吗？我想我不能使用“this”，因为我需要找到实际的a标记，并将单击处理程序附加到该标记上，这样我才能找到附加到该标记上的特定数据属性。@max7:
this
将是单击处理程序附加到的元素
$(document).on('click','img',function(e)
{//this catches all clicks on all imgs in your page
    console($(this) === $(document));//true
    console.log(e.target);//img tag
    if ($(e.target).closest('.show-modal'))
    {
        console.log('yes, clicked image is child of .show-modal element'):
    }
});