javascript - 是否有任何图像和 anchor 标记的替代组合

Question

我有一个文本和一张图片，两者都是可点击的。所以我正在使用 anchor 和图像标签。

这是一个代码。

myData.text = "<a style='color:#0000ff' onClick='func(event," + JSON.stringify(myData) + ")' href='javascript:void(0);'>"+Countary Data Connection +"</a>"+"<img src='Images/image.png' style='padding-left:2px' onClick='someFunc(event," + JSON.stringify(myData) + ")'></img>";

这是我的图片。

fiddler Fiddler所有点击事件和所有一切都很好。我在这里有两个问题。

1. 有没有我可以使用的任何其他方式或标签，或者这是唯一的方式？ ( anchor +img)
2. 我的图片不全是文字。如何使这一切。 (如果我给 padding-top 那么整个(文本+图像)都会下降。)。如何解决这个问题。

Answer 1

将 a 和 img 包装成一个 span 并将函数附加到父元素 (span)，并且对于对齐，将 vertical-align: middle; 添加到 img，默认情况下内联元素与基线对齐，这就是添加填充将两个元素移动到底部的原因。

img {
  vertical-align: middle;
}

<span onClick='func(event," + JSON.stringify(myData) + ")'><a style='color:#0000ff' href='javascript:void(0);'>Countary Data Connection </a>
<img src='Images/image.png'></span>