内联javascript onclick事件

时间:2012-07-19 19:14:55

标签: javascript

这是我的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;
}

但是当我点击命中链接时,它会重定向。

3 个答案:

答案 0 :(得分:11)

如果你想阻止默认,你需要传递活动。

HTML:

<a href="#" onclick="runFunction(event)">Hit</a>

脚本:

function runFunction (evt) {
    evt.preventDefault();
    evt.stopPropagation();
}

答案 1 :(得分:9)

要将两个非常正确的答案结合在一起,发生的事情是你已经编写了一个函数,你已经写了onclick="return runFunction();"

如果你看一下,它真正做的是这样:

var link = document.getElementById("myLink");

link.onclick = function () { 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;    
}

答案 2 :(得分:0)

当我将代码插入chrome时,我将此作为控制台中的错误: 未捕获的TypeError:无法读取未定义的属性'srcElement'

如果javascript在处理过程中爆炸,它根本没有机会返回,因此浏览器往往会忽略异常后onclick处理程序中的内容。

因为它轰炸了...锚标签的默认行为,即将你送到href所说的任何地方。

尝试在try / catch块中包装函数的内容,看看如果这种事情困扰你会发生什么。