内联 javascript onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11567749/
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
inline javascript onclick event
提问by Vicky
This is my html code
这是我的 html 代码
<a href="#" onclick="return clickHandler()">Hit</a>
This is my javascript file
这是我的 javascript 文件
function clickHandler(evt) {
var thisLink = (evt)?evt.target:Window.event.srcElement;
alert(thisLink.innerHTML);
return false;
}
But when i click the Hit Link, it redirects.
但是当我单击 Hit Link 时，它会重定向。
采纳答案by Norguard
To tie both of the very-correct answers together, what's happened is you've inlined a function where you've written onclick="return runFunction();"
为了将两个非常正确的答案联系在一起，发生的事情是您已经内联了一个您编写的函数 onclick="return runFunction();"
If you look at that, what it's really doing is going like this:
如果你看看它，它真正在做什么是这样的：
var link = document.getElementById("myLink");
link.onclick = function () { runFunction(); };
See the problem?
看到问题了吗？
My runFunctionis being called without any event object passed in, at all.
...which means that var thisLink = (evt) ?is going to return false, which means that it's going to try to run in oldIE-mode.
runFunction调用My 时根本没有传入任何事件对象。...这意味着它将var thisLink = (evt) ?返回 false，这意味着它将尝试以旧 IE 模式运行。
By writing onclick="runFunction", that's the same as saying:
通过写作onclick="runFunction"，这与说：
link.onclick = runFunction;
Which means that when the onclick event happens, runFunction will be called, and in W3C-compliant browsers, it will be sent an event object.
这意味着当 onclick 事件发生时，runFunction 将被调用，并且在符合 W3C 的浏览器中，它将被发送一个事件对象。
Which is why that solution works.
这就是该解决方案有效的原因。
The best way to avoid a lot of this confusion is to deal with JavaScript from inside of JavaScript, and to deal with HTML inside of HTML, so that you don't have to worry about how strings translate into code.
避免这种混淆的最好方法是从 JavaScript 内部处理 JavaScript，并在 HTML 内部处理 HTML，这样您就不必担心字符串如何转换为代码。
Now, to get all of this to work, AND prevent redirection, you want to do this:
现在，要使所有这些工作并防止重定向，您需要执行以下操作：
for W3C browsers (the ones that pass the event parameter):
对于 W3C 浏览器（传递事件参数的浏览器）：
function runFunction (evt) {
// stops the default-action from happening
// means you need to find another way to fire it, if you want to later
evt.preventDefault();
// stops higher-up elements from hearing about the event
// like if you stop a submit button from "clicking", that doesn't stop the form
// from submitting
evt.stopPropagation();
//the oldIE versions of both of these are
event.cancelBubble = true;
event.returnValue = false;
}
回答by Trolzie
you need to pass in the event if you wish to preventDefault.
如果您希望防止默认，则需要传入事件。
html:
html：
<a href="#" onclick="runFunction(event)">Hit</a>
script:
脚本：
function runFunction (evt) {
evt.preventDefault();
evt.stopPropagation();
}
回答by whiskeyfur
When I plugged your code into chrome, I got this as the error in the console: Uncaught TypeError: Cannot read property 'srcElement' of undefined
当我将您的代码插入 chrome 时，我在控制台中收到错误消息：Uncaught TypeError: Cannot read property 'srcElement' of undefined
IF the javascript bombs out while processing, it never gets a chance to return at all so the browser tends to disregard what is in the onclick handler after the exception.
如果 javascript 在处理时爆炸，它根本没有机会返回，因此浏览器往往会忽略异常后 onclick 处理程序中的内容。
Since it bombed out... default behavior of anchor tags, which is to send you off to wherever the href says to go.
因为它被炸毁了......锚标签的默认行为，即把你送到href所说的任何地方。
Try wrapping the contents of the function in a try/catch block and see what turns up if this kind of thing plagues you.
尝试将函数的内容包装在 try/catch 块中，看看如果这种事情困扰你会发生什么。
