如何在onclick方法中防止默认事件处理？

Question

如何在onclick方法中阻止默认事件？我有一个带自定义值的方法。

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

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

- coure2011

Answer 1

让您的回调函数返回 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源文件来修改元素的行为（这称为不侵入式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 */
});

- Linus Kleen

---

@AamirAfridi 是的，它正在工作。您应该调整您的fiddle并将 onLoaded 更改为 no wrap。或者简单地编写自己的 .html 标记。 - Linus Kleen

在我看来，这个答案是错误的！他要求使用event.preventDefault();，但当你仅使用return false;时，它也会调用event.preventDefault();和event.stopPropagation();！ - Ravindranath Akila

要挑剔一点，OP的问题从来没有提到preventDefault，问题是如何“阻止默认点击”。 - Linus Kleen

@LinusKleen，请也说明一下如何防止在这个案例中的点击。 - vp_arth

@vp_arth 使用“CSS 点击穿透”来实现。请参考这个问题。 - Linus Kleen

Answer 2

在我的看法中，答案是错误的！他要求使用 event.preventDefault(); 但当你仅使用 return false; 时，它会同时调用 event.preventDefault(); 和 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();
}

- Wawa

---

你依赖于 window.event，但并非所有浏览器都支持它。 - Linus Kleen

编辑添加：事件 = 事件 || 窗口事件; - Nigel Fds

正如@LinusKleen所说，window.event正在被弃用。https://developer.mozilla.org/en-US/docs/web/api/window/event - Hassan Faghihi

实际上，原始答案（不包括e = e || window.event）并不依赖于window.event：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes - YouJiacheng

Answer 3

如果您没有有效的href值用于优雅降级，请尝试此方法（但在这种情况下请使用按钮）

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

- Aamir Afridi

---

优美简洁最佳。我希望对于 event.preventDefault(); 也是同样的效果。 - Sameer Kazi

它对我起作用了，但你能解释一下为什么你必须要 return false; 吗？我们到底是在返回 false 给谁呢？ - Kellen Stuart

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

Answer 4

你可以使用纯JavaScript捕获事件，然后通过preventDefault()方法阻止它

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

- Andreas Karz

Answer 5

在href标签中，只需将“#”替换为“javascript:void(0)”即可。

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

- Rafay

Answer 6

这对我起作用了

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

- Pixelomo

Answer 7

您可以使用：

event.stopPropagation();

https://dom.spec.whatwg.org/#dom-event-stoppropagation

- Girdacio Pereira

Answer 8

另一种方法是在 onclick 属性中使用 event 对象（无需添加额外参数以传递事件）。

function callmymethod(myVal){
    console.log(myVal);
}

<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>

- h3t1

Answer 9

有多种不同的答案。即使多年过去了，这个问题仍然很重要。因此，这里是汇编：

// 1
function myFn1 (e, value) {
    console.log('value:', value)
    e.preventDefault();
}

// 2
function myFn2 (value) {
    console.log('value:', value)
    return false;
}

// 3,5,6,7
function myFn3 (value) {
    console.log('value:', value)    
}

// 4
document.getElementById("clicki-1").addEventListener('click', function(event){
    event.preventDefault();
    console.log('value:',this.getAttribute("data-value"));
});

<h3>onclick Attribute</h3>
<div>
  <a href="/hello" onclick="myFn1(event, 42)">Click 1</a>
</div>

<div>
  <a href="/hello" onclick="return myFn2(42)">Click 2</a>
</div>

<div>
  <a href="/hello" onclick="myFn3(42); return false;">Click 3</a>
</div>

<h3>EventListener (addEventListener)</h3>
<div>
  <a href="/hello" id="clicki-1" data-value="42">Click 4</a>
</div>

<h3>onclick Attribute without linkaddress when hovering</h3>
<div>  
  <a href="javascript:;" onclick="event.preventDefault(); myFn3(42)">Click 5</a>
</div>

<div>  
  <a href="javascript:void(0);" onclick="myFn3(42)">Click 6</a>
</div>

<div>  
  <a href="javascript:;" onclick="myFn3(42)">Click 7</a>
</div>

<h5>Set Anchor Hashtag</h5>
<div>  
  <a href="#" onclick="myFn3(42)">Click 8</a>
</div>

如果需要快速处理，我更喜欢第二种方式，使用return false;。否则，可以选择第四种方式（AddEventListener）。

- Maik Lowrey

Answer 10

在所有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和最新版本的Chrome在onclick事件处理程序完成后访问href="#"。

致谢：

• 如何在JavaScript中找到调用者函数？
• {{link2：event.preventDefault()函数在IE中无法正常工作}}

- Vadzim