Question

这可能是javascript 101，但我无法找到解决方案。考虑following fiddle

我的js使用班级.show-modal

在标签上设置点击事件

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

关于这一点的两件事对我来说是一个挑战：

我成功将事件目标作为标记的唯一方法是将img标记分离到它之外（即使它成为标记的兄弟，而不是孩子）然后设置一个标签位置：绝对，给它在img上的尺寸和位置。我认为这种方法必须是最不可取的，但我还能如何实现我的目标呢？
真正令我困惑的是，事件目标如何与我附加点击事件的元素不同？它们不应该是一样的吗？如果它们应该是相同的，如果接收click事件的元素不是我将click事件附加到的那个元素，我的函数如何被调用？

Answer 1

使用

e.currentTarget - 提供绑定事件的元素。（也可以使用这个）

e.target - 提供触发事件的元素。

<强> Check Fiddle

这里的问题是你的形象几乎完全占据了锚。因此anchor标记永远不会是e.target ..

查看高度不同的示例。

<强> Check Fiddle

Answer 2

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

当您单击图像时，事件会向上传播DOM树，触发绑定到click的{{1}}处理程序。

如果您需要anchor，则可以使用anchor。

Answer 3

您可以使用this代替目标：DEMO

$(document).ready(function(){
    $('.show-modal').on('click',function(e){
        console.log(this);
    });
});

Answer 4

事件在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'):
    }
});

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

4 个答案: