2

这可能是 javascript 101，但我无法找到解决方案。考虑以下小提琴

我的 js 使用类在 a 标签上设置点击事件.show-modal

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

有两件事对我来说是一个挑战：

  1. 我成功地将事件目标设置为 a 标签的唯一方法是将 img 标签与它分开（即使其成为 a 标签的兄弟，不再是子标签），然后设置 a 标签位置：绝对的，给它在img上的尺寸和位置。我认为这种方法必须是最不可取的，但我还能如何实现我的目标？

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

4

4 回答 4

7

采用

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

e.target -- 给出触发事件的元素。

检查小提琴

这里的问题是您的图像几乎完全占据了锚点。所以anchor标签永远不会是e.target..

查看高度不同的示例。

检查小提琴

于 2013-08-02T07:39:11.753 回答
3

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

当您单击图像时，事件会向上传播 DOM 树，从而触发click绑定到anchor.

如果需要anchor，可以使用this.

于 2013-08-02T07:39:34.573 回答
1

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

$(document).ready(function(){
    $('.show-modal').on('click',function(e){
        console.log(this);
    });
});
于 2013-08-02T07:39:01.210 回答
1

该事件在标签上触发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'):
    }
});
于 2013-08-02T07:39:38.920 回答