Question

美好的一天！例如，我有这段代码：

<a href="link" onclick="myfunc()">Secret link</a>

如何在没有在 myfunc（'link'，'name'）中明确定义的情况下，将其值（例如：href和name）传递给onclick事件？也许，有类似的东西：

<a href="link" onclick="myfunc(this)">Secret link</a>

P.S。我不使用JQuery

Answer 1

也许，有类似
的东西
<a href="link" onclick="myfunc(this)">Secret link</a>

是的，完全链接。然后在myfunc中，使用参数的属性和/或属性：

function myfunc(link) {
    console.log(link.href);
}

列出HTMLAnchorElement的属性in the spec。如果您在元素上包含其他信息（例如data-* attributes）（或者您想要原始 href，而不是已解析的信息），请通过{{1}获取它们方法（DOM4，MDN）。

虽然它是一个链接，但是，如果您对其进行点击回复，您可能还想阻止该链接的默认操作（在该链接之后）。为此，您需要将getAttribute添加到return以及onclick处理程序中。实例：

＆＃13;

return false;

＆＃13;

function myfunc(link) {
  console.log("href property: " + link.href);
  console.log("href attribute: " + link.getAttribute("href"));
  return false;
}

＆＃13;

不是使用<a href="link" onclick="return myfunc(this)">Secret link</a> - 属性风格的事件处理程序，我建议您阅读addEventListener和event delegation。

Answer 2

如何将其值传递给onclick，例如：href和name 没有明确地在myfunc（＆＃39; link＆＃39;，＆＃39; name＆＃39;）中定义它的事件？

您可以使用this和getAttribute

从innerText本身获取

function myfunc( thisObj )
{
   var link = thisObj.getAttribute( "href" );
   var name = thisObj.innerText;
}

并使用this

传递onclick

<a href="link" onclick="myfunc(this)">Secret link</a>

另外，尝试without inline event

document.querySelector( "a" ).addEventListener( "click", function( event ){
   event.preventDefault(); //to prevent default action of link click
   var link = this.getAttribute( "href" );
   var name = this.innerText;
});

Answer 3

您可以使用 getAttribute

<强> getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string)

function myfunc(elem) {
  console.log(elem.getAttribute('id'))
}

<a href="#" id="click" onclick="myfunc(this)">Secret link</a>

JavaScript如何在单击时获取“a”标记的数据？

3 个答案: