如何防止onclick方法中的默认事件处理?


88

如何防止onclick方法中的默认设置?我有一个传递自定义值的方法

<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}

Answers:


106

让您的回调返回false并将其传递给onclick处理程序:

<a href="#" onclick="return callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
    return false;
}

但是,要创建可维护的代码,您应该避免使用“内联Javascript”(即直接位于元素标签内的代码),并通过包含的Javascript源文件(称为Unobtrusive Javascript)修改元素的行为。

标记:

<a href="#" id="myAnchor">Call</a>

代码(单独的文件):

// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
    Event.stop(event); // suppress default click behavior, cancel the event
    /* your onclick code goes here */
});

1
@AamirAfridi是的,它正在工作。您应该调整小提琴并更改onLoadedno wrap。或者直接编写您自己的.html标记。
莱纳斯·克莱恩

1
请参阅下面的答案!“我认为答案是错误的!他要求提供event.preventDefault();当您仅返回false时;它也会调用event.preventDefault(); AND event.stopPropagation();!”
Ravindranath Akila 2013年

1
出于挑剔,OP的问题从未提及preventDefault,问题是如何“防止默认点击”
Linus Kleen

1
@LinusKleen,请也说,在这种情况下
vp_arth 2014年

1
@vp_arth为此使用“ CSS click through”。看这个问题
Linus Kleen

46

我认为答案是错误的!他问event.preventDefault();你什么时候简单地返回false;它也调用event.preventDefault();AND event.stopPropagation();

您可以这样解决:

<a href="#" onclick="callmymethod(event, 24)">Call</a>
function callmymethod(e, myVal){
    //doing custom things with myVal

    //here I want to prevent default
    e = e || window.event;
    e.preventDefault();
}

6
您所依赖的window.event并不总是在所有浏览器中都可用。
Linus Kleen

编辑添加:event = event || window.event;
Nigel Fds

45

试试这个(但请对这样的情况下使用的按钮,如果你没有一个有效href的价值优雅降级

<a href="#" onclick="callmymethod(24); return false;">Call</a>

1
好极了。我对event.preventDefault()也要这样;
Sameer Kazi 2015年

它对我有用,但是您能解释为什么要这么做return false;吗?我们什至还返回false?
Kolob峡谷

您可以只返回而不是返回false,返回将避免链接导航到href。从技术上讲,在这种情况下,我们应该使用按钮。
Aamir Afridi

12

您可以捕获事件,然后使用preventDefault()将其阻止-与纯Javascript一起使用

document.getElementById("xyz").addEventListener('click', function(event){
    event.preventDefault();
    console.log(this.getAttribute("href"));
    /* Do some other things*/
});

11

只需在href标记中将“ javascript:void(0)”代替“#”

<a href="javascript:void(0);" onclick="callmymethod(24)">Call</a>

9

这对我有用

<a href="javascript:;" onclick="callmymethod(24); return false;">Call</a>


0

将所有html页面中的功能用法更改为会太繁琐return false

因此,这是一个仅对功能本身进行修补的经过测试的解决方案:

function callmymethod(myVal) {
    // doing custom things with myVal

    // cancel default event action
    var event = window.event || callmymethod.caller.arguments[0];
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    return false;
}    

这样可以正确地防止IE6,IE11和最新的Chromehref="#"在onclick事件处理程序完成后访问。

学分:


0

如果需要将其放在标签中。不是最好的解决方案,但它会起作用。

确保将onclick事件放在href前面。仅以这种方式为我工作。

<a onclick="return false;" href="//www.google.de">Google</a>

0

做到这一点的另一种方法是使用event属性内的对象onclick(无需在函数中添加其他参数以传递事件)

function callmymethod(myVal){
    console.log(myVal);
}
<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>


-3

给元素一个类或id并使用jquery函数unbind();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.