英文:
How to get the hyperlink in a tag using javascript?
问题
这是一个HTML和JavaScript的代码示例，你想知道如何在a标签中获取链接的一般方法。
这是一个获取链接的一般方法的示例代码：
document.addEventListener('mousedown', function(event) {
let elem = event.target;
if (elem.tagName === 'A') {
let link = elem.getAttribute('href');
if (event.button === 2) {
alert(link);
}
}
});
这个代码会在鼠标右键点击链接时弹出链接地址。
英文:
Here I have an html with javascript:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.addEventListener('mousedown', function(event) {
let elem = event.target;
let jsonObject = {
Key: 'mousedown',
Value: event.button
};
if (event.button == 2) {
console.log(elem.outerHTML);
}
});
<!-- language: lang-html -->
<span style="font-size:xx-large">
<a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">
<i>
<font color="#ff0000">Microsoft</font>
</i>
</a>
</span>
<br/>
<a href="https://google.com">Google</a>
<div>
<!-- end snippet -->
When I right click the link, it should alert me the hyperlink inside.
The Google works fine. But when right click Microsoft, it always returns the font tag.
I also tried this, still not work:
document.addEventListener('mousedown', function (event)
{
let elem = event.target;
let name = elem.tagName;
let jsonObject =
{
Key: 'mousemove',
Value: name == 'A' ? elem.outerHTML : ' '
};
if(event.button == 2 && name == 'A')
{alert(elem.outerHTML);}
});
Is there a general method for getting the links in the a tags?
答案1
得分: 1
你可以遍历父节点，直到找到锚点，就像这样：
document.addEventListener('mousedown', event => {
let elem = event.target;
while(elem && elem.tagName!=='A') elem = elem.parentElement;
if(elem) {
let jsonObject =
{
Key: 'mousedown',
Value: event.button
};
if(event.button == 2) {alert(elem.href);}
}
});
<span style="font-size:xx-large">
<a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">
<i>
<font color="#ff0000">Microsoft</font>
</i>
</a>
</span>
<br/>
<a href="https://google.com">Google</a>
<div>
英文:
You can traverse the parent nodes until you find the anchor, like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.addEventListener('mousedown', event => {
let elem = event.target;
while(elem && elem.tagName!=='A') elem = elem.parentElement;
if(elem) {
let jsonObject =
{
Key: 'mousedown',
Value: event.button
};
if(event.button == 2) {alert(elem.href);}
}
});
<!-- language: lang-html -->
<span style="font-size:xx-large">
<a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">
<i>
<font color="#ff0000">Microsoft</font>
</i>
</a>
</span>
<br/>
<a href="https://google.com">Google</a>
<div>
<!-- end snippet -->
答案2
得分: 1
以下是您要翻译的内容：
"Closest should do it"
英文:
Closest should do it
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.addEventListener('mousedown', function(event) {
let elem = event.target.closest("a");
if (!elem) return; // not a link
let jsonObject = {
Key: 'mousedown',
Value: event.button
};
if (event.button == 2) {
console.log(elem.textContent.trim(),":",elem.href,"\n",elem.outerHTML);
}
});
<!-- language: lang-html -->
<span style="font-size:xx-large">
<a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">
<i>
<font color="#ff0000">Microsoft</font>
</i>
</a>
</span>
<br/>
<a href="https://google.com">Google</a>
<div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论