如何将对象传递给来自JavaScript的href函数
[英]How to pass the object to function call from javascript as href
问题描述
Using inline events as attributes I can pass the current object to a function using this keyword. 
使用内联事件作为属性，我可以使用this关键字将当前对象传递给函数。 How could I do it using calling it through Javascript as href. 如何使用Javascript作为href调用它。
The following example clearing the question: 以下示例清除了问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
function foo(ob){
alert(ob.innerText);
}
</script>
</head>
<body>
<a href="#" onclick="foo(this)">On Click Call</a> Works Fine!
<br />
<br />
<a href="javascript:foo(this)">Javascript linked</a> Does not work.
</body>
</html>
3 个解决方案
解决方案1
4 已采纳 2015-05-18 01:08:44
Generally, for maintainability reasons among others, it's a good idea to avoid putting JavaScript directly into the href attribute. 通常，出于可维护性等原因，最好避免将JavaScript直接放入href属性。 So I would not recommend this approach. 所以我不推荐这种方法。 However, if you did need to go this route for some reason... 但是，如果由于某些原因您确实需要走这条路线...
When JavaScript is invoked via the href attribute, the value of this is window . 当JavaScript是通过调用href属性的值， this是window 。 To get the clicked element instead, one (somewhat kludgy) solution is to assign it an id attribute that you can use to select it. 要获得被点击的元素，一种解决方案（有点笨拙）是为其分配一个id属性，您可以使用该属性来选择它。
<a id="js-linked" href="javascript:foo(document.getElementById('js-linked'));">Javascript linked</a>
As you can see, this gets a little hard to read. 如您所见，这有点难以理解。 Using the onclick attribute keeps things cleaner and more maintainable because this is assigned the value of the clicked element. 使用onclick属性，因为使事情变得更清洁，更容易维护this被赋予单击元素的值。 And avoiding inline JS altogether and attaching a click listener in isolated code might keep things cleaner and more maintainable yet. 完全避免使用内联JS并在隔离的代码中附加click侦听器可能会使事情更清洁，更可维护。
解决方案2
2 2015-05-18 01:08:48
It's generally better to use the principles of Unobstrusive Javascript and not put the event handler in your HTML at all. 通常最好使用Unobstrusive Javascript的原则，而不要完全在HTML中放置事件处理程序。
When you then use .addEventListener() to install your event handler, the value of this will be set for you automatically to the object that caused the event. 当你再使用.addEventListener()来安装你的事件处理程序，价值this会为您自动设置到导致该事件的对象。
Here's how that would work: 这是如何工作的：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a href="#" id="call">On Click Call</a> Works Fine!
<script>
document.getElementById("call").addEventListener("click", function(e) {
e.preventDefault();
alert(this.textContent);
});
</script>
</body>
</html>
Changes made: 所做的更改：
- Move the
<script>tag to after the content so DOM elements will already be loaded when the script runs.将<script>标记移至内容之后，以便在脚本运行时已加载DOM元素。 - Add a unique id value to the target link 向目标链接添加唯一的ID值
- Use
document.getElementById()to get the target link object使用document.getElementById()获取目标链接对象 - Move the event handler out of your HTML and into your script and use
.addEventListener()to add the event handler.将事件处理程序移出HTML并移至脚本中，然后使用.addEventListener()添加事件处理程序。 - Use
thisto refer to the clicked link in the event handler.使用this来引用事件处理程序中单击的链接。
解决方案3
1 2015-05-18 01:13:06
In the javascript:foo(this) this refers to Window object. 在javascript:foo(this) this是指Window对象。 You do not have a reference to the clicked element when using javascript pseudo protocol, therefore it will not work. 使用javascript伪协议时，您没有对clicked元素的引用，因此将无法使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.