使标签成为事件的目标,而不是img

最高7

这可能是javascript 101,但我想不出解决方案。考虑以下小提琴

我的js使用该类在a标记上设置了click事件 .show-modal

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

关于此的两件事对我提出了挑战:

  1. 我成功将事件目标设置为标签的唯一方法是将img标签从其外部分离(即使其成为标签的同级对象,而不再是子级),然后设置标签位置:绝对值,在img上提供尺寸和位置。我认为这种方法必须是最不可取的,但是我还能如何实现我的目标呢?

  2. 真正令我困惑的是,事件目标与我附加click事件的元素有什么不同?他们不应该一样吗?如果它们应该相同,那么如果接收到click事件的元素不是我附加click事件的元素,那么该如何调用我的函数呢?

比利翁坎

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

当您点击图片时,事件会在DOM树上传播,触发click绑定到的处理程序anchor

如果需要anchor,可以使用this

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在img标签上禁用指针事件angularjs

LazyLaoding CSS背景(不是HTML <img>标签)

为什么事件目标是选择元素而不是选择的选项?

Click事件-获取从mousedown而不是mouseup开始的目标

Vue在img标签上的@error是否侦听onerror事件?

AngularJs - 从 <img> 标签调用 onclick 事件的 $scope 函数

React + Jest-在IMG标签上测试`error`事件

如何将 img 转换为链接并使 <a> 标签成为其包含的图像的高度

emberjs:动态图片不是来自html img标签

使压缩档案的内容成为目标

带有 HTML 5 图片标签而不是 img 标签的 Bootstrap 4 Carousel 有效吗?

在Material-ui卡组件中如何使用Video html标签而不是img标签

目标img类名称

WPF:不能在样式的目标标签上指定事件“完成”。改用EventSetter

“编辑标签目标属性与添加事件侦听器”以在新窗口中打开

如何获得按钮的事件目标,而不是单击时获得的按钮内部内容

点击事件目标提供元素或其子元素,而不是父元素

悬停事件返回多个值,而不是与悬停目标有关的值

如何使标签文本成为数组?

如何在鼠标悬停事件上每次计算img标签

事件委托帮助,我如何仅使用纯 Javascript 定位 <img> 标签?

之后如何使导入的目标成为GLOBAL?

事件 C# 的目标

如何在img标签中重复图像(不是CSS背景图像)

如何使用 Javascript 而不是使用 <img> 标签来使用背景属性?

如何在TagLib中使用pngRenderingService.render获取图像标签而不是<img>

<img>标签视差图像不是背景图像:附加在CSS中

Unicode 可以在 <img> 标签的 'src' 属性而不是路径中使用吗

纯Javascript目标标签