Javascript jquery href 和 onclick 分离
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8852482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery href and onclick separation
提问by newcoderintown
I have code like this
我有这样的代码
<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>
func2 returns true or false. Then, func1 is called only when function2 returns true. Right ?
func2 返回真或假。然后，只有在 function2 返回 true 时才调用 func1。对 ？
In learning jquery, I found out that onclick is not good and depreciated, so I modified above code to
在学习jquery的时候发现onclick不好折旧，所以把上面的代码修改为
<a id="id101" href="javascript:func1();">Link</a>
jquery
$("#id101").click(func2() {
//same stuffs from before which was in func2
});
Now, my question is:
现在，我的问题是：
after click handler is taken care of, what can I do with JavaScript inside href? Should I call func1 inside func2 in jQuery click handler of func2, when condition inside func2 is true? Or is there some elegant solution?
处理完点击处理程序后，我可以在 href 中使用 JavaScript 做什么？当 func2 中的条件为真时，我应该在 func2 的 jQuery 单击处理程序中的 func2 中调用 func1 吗？或者有什么优雅的解决方案？
Also, Separating html and events code is good, but here this element with id id101can have many events associated with it, and in a large file, there might be so many html elements with many events. So, when I have a large page with many event handlers, then how can I better know which html element has which and how many events associated with it?
另外，将 html 和 events 代码分开是好的，但是这里带有 id 的元素id101可以有很多与之关联的事件，并且在一个大文件中，可能会有很多带有很多事件的 html 元素。因此，当我有一个包含许多事件处理程序的大页面时，我如何才能更好地了解哪个 html 元素具有哪些以及与之关联的事件？
More explanation to above question as requested,
根据要求对上述问题进行更多解释，
I meant id101 can have onclick, onmouseover, onmouseout and many other such events. There can be many such elements with many such event handlers. How do I better spot them ? In old style, all such event handlers are all placed together, like this
我的意思是 id101 可以有 onclick、onmouseover、onmouseout 和许多其他此类事件。可以有许多具有许多此类事件处理程序的此类元素。我如何更好地发现它们？在旧样式中，所有此类事件处理程序都放在一起，如下所示
<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.
<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.
I am not saying this is good, but atleast I can see that it has this onclick event. But now when separting this into jquery file, I have to search first this jquery file for id101 and then check events associated with it, which can be problem with html file having many elements and associated event handlers. Is there any better way to to find that information ?
我并不是说这很好，但至少我可以看到它有这个 onclick 事件。但是现在当将它分离到 jquery 文件时，我必须首先搜索这个 jquery 文件的 id101，然后检查与之关联的事件，这可能是具有许多元素和关联事件处理程序的 html 文件的问题。有没有更好的方法来查找这些信息？
回答by Josh
If I understand correctly, you want to avoid the inline Javascript, but you also want to be able to glance at an aand know if it has an event bound to it. Unfortunately, there isn't an acceptable way to denote this, as inline Javascript is bad news. Perhaps you can just give your element a dummy class to aid your future readability. Other than that, forget the whole func1and func2thing. Just use an anonymous function inside of your click binding.
如果我理解正确，您希望避免使用内联 Javascript，但您也希望能够查看 ana并知道它是否绑定了一个事件。不幸的是，没有一种可接受的方式来表示这一点，因为内联 Javascript 是个坏消息。也许你可以给你的元素一个虚拟类来帮助你未来的可读性。除此之外，忘记整体func1和func2事情。只需在单击绑定中使用匿名函数即可。
<a id="some_id" class="optional_has_click">Click Me</a>
<script type="text/javascript">
$(document).ready(function(){
$("#some_id").click(function(){
// do something
alert( $(this).attr("id") );
});
});
</script>
EDIT:Also, removing the hrefwill remove the visual cue, so you can use your dummy class to make it look like an a.
编辑：此外，删除href将删除视觉提示，因此您可以使用虚拟类使其看起来像a.
Here is a fiddle for you: http://jsfiddle.net/zzTSt/1/
这是给你的小提琴：http: //jsfiddle.net/zzTSt/1/
回答by Cyberon
Yes, I recommend you to write func1 inside func2. HTML:
是的，我建议你在func2里面写func1。HTML：
<a id="id101" href="#" >Link</a>
jQuery
jQuery
$("#id101").click(func2() {
var status = false;
//func2 goes here and modifies status value.
if (status) {
// func1 goes here
} else {
// in case if status is false.
}
});
Also I didn't get what you mean in second part of your question, could you please be more specific.
另外我没有明白你在问题的第二部分的意思，你能不能更具体一点。
回答by Cyberon
The best I can tell you is that this is "smelly" code--you don't want your javascript all over the place like this. I would recommend you spend a few more hours learning some jQuery fundamentals and move on from there. I know it can be frustrating, especially if you are working with legacy javascript.
我能告诉你的最好的是，这是“臭”的代码——你不希望你的 javascript 像这样到处都是。我建议您多花几个小时学习一些 jQuery 基础知识，然后继续学习。我知道这可能令人沮丧，尤其是当您使用旧版 javascript 时。
