[英]inline javascript onclick event
这是我的HTML代码
<a href="#" onclick="return clickHandler()">Hit</a>
这是我的javascript文件
function clickHandler(evt) {
var thisLink = (evt)?evt.target:Window.event.srcElement;
alert(thisLink.innerHTML);
return false;
}
但是当我点击命中链接时,它会重定向。
如果你想阻止默认,你需要传递这个事件。
HTML:
<a href="#" onclick="runFunction(event)">Hit</a>
脚本:
function runFunction (evt) {
evt.preventDefault();
evt.stopPropagation();
}
为了将两个非常正确的答案结合在一起,发生了什么事情就是你已经编写了一个函数,你写了onclick="return runFunction();"
如果你看一下,它真正做的是这样的:
var link = document.getElementById("myLink");
link.onclick = function () { runFunction(); };
看到问题?
我的runFunction
被调用时runFunction
没有传入任何事件对象。 ...这意味着var thisLink = (evt) ?
将返回false,这意味着它将尝试在oldIE模式下运行。
通过编写onclick="runFunction"
,这与说:
link.onclick = runFunction;
这意味着当onclick事件发生时,将调用runFunction,并且在符合W3C的浏览器中,它将被发送一个事件对象。
这就是解决方案有效的原因。
避免这种混淆的最好方法是从JavaScript内部处理JavaScript,并在HTML中处理HTML,这样您就不必担心字符串如何转换为代码。
现在,为了使所有这些工作,并防止重定向,你想这样做:
对于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;
}
当我将代码插入chrome时,我将此作为控制台中的错误:Uncaught TypeError:无法读取未定义的属性'srcElement'
如果javascript在处理时轰炸,它根本没有机会返回,因此浏览器往往会忽略异常后onclick处理程序中的内容。
因为它轰炸了...锚标签的默认行为,这将把你送到href说去的地方。
尝试在try / catch块中包装函数的内容,看看如果这种事情困扰你,会出现什么。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.