是否可以在按下超链接时执行 javascript

Question

我有一个链接：

<a href="https://somelink.com" target="_blank">
    SOMENAME <i class="fa fa-chevron-right"></i>
</a>

现在，我想在按下上述超链接时执行 javascript，而不在 <a href ... /a> 中添加任何代码。

这可能吗？

编辑：

这个问题与之前提出的问题不同，因为我在<a href ... /a> 中没有任何<id>。

另外，我无法在 <a href ... /a> 内添加内联代码。我不知何故需要跟踪超链接的按下，然后执行 javascript。另外，我有很多这样的超链接，我需要以不同的方式跟踪它们。

Answer 1

内联：

<a href="https://stackoverflow.com" onclick="return myFunction();">link</a>

<script type="text/javascript">
    function myFunction () {
        // return false => does not navigate to href
        // return true => navigate to href
    }
</script>

或者通过JS添加点击监听：

var link = document.querySelector('a');
link.onclick = function() {

}

编辑：如果有多个链接：

var links = document.querySelectorAll('a');
for(var i = 0; i < links.length; i++) {
    var link = links[i];
    link.onclick = function() {

    }
}

EDIT2：如果要通过href属性内容来区分：

a[href]        an a element with a "href" attribute (CSS 2)
a[href="bar"]  an a element whose "href" attribute value is exactly equal to "bar" (CSS 2)
a[href~="bar"] an a element whose "href" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
a[href^="bar"] an a element whose "href" attribute value begins exactly with the string "bar" (CSS 3)
a[href$="bar"] an a element whose "href" attribute value ends exactly with the string "bar" (CSS 3)
a[href*="bar"] an a element whose "href" attribute value contains the substring "bar" (CSS 3)
a[href|="en"]  an a element whose "href" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

所以你会：

var link = document.querySelector('a[href="theValueIamLookingFor"]');
link.onclick = function() {

}

EDIT3：您还可以在 for 循环中测试 href 值：

var links = document.querySelectorAll('a');
for(var i = 0; i < links.length; i++) {
    var link = links[i];
    link.onclick = function() {
        switch(link.href) {
            case 'www.google.com':
                // Do something
                break;
            case 'https://stackoverflow.com':
                // Do something else
                break;
            default:
                return true;
        }
    }
}

Answer 2

正如您在评论中所说，您的文档中可能有多个标签，最简单的方法是选择具有特定 href 的元素。

$('a[href^="https://somelink.com"]').click(function() {
    alert('you pressed me');
});

您无需在“a”标签中编辑或添加内容。

Answer 3

如果您知道在 href 属性中传递的值，您可以执行以下操作：

编辑

$( "a" ).each(function(){
  if($(this).attr("href") === "https://google.com" )
    console.log('hey');
});