Question

首先是一个简短的背景。所以我刚开始练习使用API。有了我正在使用的那个，我正在加载一个DIV，里面有很多链接，我必须给它一个新的目的。我设法阻止了默认的onclick-function。现在我需要保存点击链接“innerHTML”属性。

var nextPage = document.getElementsByTagName("a")[this].innerHTML;

用[this]我试图定位点击的链接，但它没有用。希望你理解我正在做的事情。如果是这样，有什么办法可以解决这个问题吗？

谢谢！

编辑：

     $("#content, a").click(function(event){
 event.preventDefault();

     var x = document.getElementsByTagName("a")[0].innerHTML;
    console.log(x)



 getPage(x);
 });

Answer 1

首先document.getElementsByTagName("a")[this].innerHTML;将返回undefined，因为它将返回html节点的集合，并且必须传递索引而不是this。

由于您已经有点击，您可以尝试以下代码：

function yourClickFunction(event) {
  var target = event.target || event.srcElement;
  var nextPage = target.innerHTML;
}

Answer 2

使用jQuery：

$('a').on('click', function(){
  // this will run with every click, and 'this' will be your clicked item
  console.log(this.innerHTML);

  // although you probably want:
  console.log($(this).attr('href'));
});

使用jQuery可以使您的代码更清晰，并统一直接处理DOM API时可能遇到的跨浏览器兼容性问题。

Answer 3

您可以为所有onclick代码元素添加a侦听器

var links = document.getElementsByTagName('a');
for (var i = 0, il = links.length; i < il; i++) {
  links[i].onclick = clickHandler;
}

function clickHandler(event) {
  console.log(this.innerHTML);
}

<a>Link a</a>
<a>Link b</a>

Answer 4

如果我找到你的话，

this.innerHTML可以完成这项工作。

如果要获取整个html，可以将onclick事件绑定到锚本身，如果可能的话，可以对其进行处理。

<a onclick="clicked(this)">Click me</a>
function clicked(element) {
    // Do whatever needed
    // element.innerHTML will change it's innerHTML
}

您也可以像以下一样

$("#content, a").click(function(event){
    event.preventDefault();
    event.target.innerHTML = "Whatever";
})

Answer 5

您可以使用公共类（以下示例中为link）来附加点击事件，然后使用this.innerHTML返回您点击的链接的文字。

希望这有帮助。

var classname = document.getElementsByClassName("link");

var clickFunction = function(){
  //Prevent default
  if ( event.preventDefault ) event.preventDefault();
  event.returnValue = false;
  
  //Get text
  console.log(this.innerHTML);
}

for(var i=0;i<classname.length;i++){
  classname[i].addEventListener('click', clickFunction, false);
}

<a href='link-1' class='link'>Link 1</a>
<a href='link-2' class='link'>Link 2</a>
<a href='link-3' class='link'>Link 3</a>

Answer 6

document.getElementsByTagName("a")为您提供了一个HTMLAnchorElement数组。数组的索引是从0到n的整数值。

在您的上下文中

this我认为它是windows对象（您的代码示例有点短，所以我必须猜一点）

使用window作为期望整数的数组的索引当然不会给你任何东西。或者undefined准确无误。

有两种可能的方法可以满足您的需求：

onclick处理程序

function hello(elem) {
  console.log("you clicked on '" + elem.innerHTML + "'")
}

<a href="#" onclick="hello(this)">click me</a>

这里我使用的是onclick属性，我将html中的this上下文作为参数传递给我正在调用的函数。这很重要。
现在我可以通过引用收到的参数来操作被点击的元素。

出于多种原因，我不会建议这种方法。但是既然你在问题中提到了onclick属性......

单击事件处理程序

这将是我首选的解决方案

function hello(evt) {
  var elem = event.target || event.srcElement;
  console.log("you clicked on '" + elem.innerHTML + "'");
}

var link = document.getElementsByTagName("a")[0]
link.addEventListener("click", hello)

<a href="#">click me</a>

这里html中没有代码（或代码的引用）。您可以从代码中检索HTMLAnchorElement，并将监听器附加到click事件现在，只要单击链接就会调用事件处理程序，默认情况下它将接收事件对象。从该对象中，您可以提取target（生成事件的对象）并访问其属性。

按标签名称获取元素[this]？

6 个答案:

onclick处理程序

单击事件处理程序