Question

我的脚本包含一个a元素链接，其href属性为“#login”，如下所示。

<a href="#login">Login</a>

我希望我的Javascript函数检测链接中的“href”元素并执行。我怎样才能做到这一点？我的Javascript函数是

window.onload = function() {
    document.getElementsByTagName("a[href=#login]").onclick = function(e) {
        e.preventDefault();
        alert("working");
    }
}

Answer 1

为什么我在这些答案中看不到querySelector的喜欢？

如果你想使用那个CSS选择器来抓取你的链接，没有什么能阻止你：

window.onload = function() {
  document.querySelector("a[href='#login']").onclick = function(e) {
    e.preventDefault();
    alert("working");
  }
}

<a href="#login">Login</a>

修改我在另一个答案中看到，您认为页面上可能有多个与该选择器匹配的链接，在这种情况下，您需要循环遍历它们：

window.onload = function() { var links = document.querySelectorAll("a[href='#login']"), //always create anonymous functions outside of a loop :) click = function(e) { e.preventDefault(); alert("working"); }, i; for (i = 0; i < links.length; i++) { links[i].onclick = click; } }

<a href="#login">Login</a> <a href="#login">Login</a>

Answer 2

试试这个：

<a href="#login" onclick="getValue()">Login</a>

function getValue()
{
    alert("working");
    e.preventDefault();  
}

FIDDLE

Answer 3

你的getElementsByTagName将它视为jquery选择器，它不是设计用的。

为代码添加id并使用getElementById会更简单：

＆＃13;

window.onload = function() {
    document.getElementById("loginLink").onclick = function(e) {
        e.preventDefault();
        alert("working");
    }
}

＆＃13;

<a href="#login" id="loginLink">Login</a>

＆＃13;

如果出于某种原因无法更改html并且您希望以这种方式执行此操作，则需要获取所有 a标记然后遍历每个标记以测试{{1属性。请注意，您需要使用href来获取＆＃34;＃login＆＃34;，而不仅仅是a.getAttribute("href")哪些信息会为您提供完整的网址：

＆＃13;

a.href

＆＃13;

window.onload = function() {
  var aTags = document.getElementsByTagName("a");
  for(var i = 0; i < aTags.length; i++) {
    var a = aTags[i];
    if(a.getAttribute("href") == "#login") {
      a.onclick = function(e) {
        e.preventDefault();
        alert("working");
      }
    }
  }
}

＆＃13;

单击具有href属性的链接并执行Javascript函数

3 个答案: