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

Question

如何防止onclick方法中的默认值？我有一个方法,我也传递自定义值

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

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

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 */
});

Answer 2

尝试

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

Answer 3

在我看来答案是错误的!他要求event.preventDefault();你什么时候回归虚假; 它也称为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();
}

Answer 4

您可以捕获事件,然后使用preventDefault()阻止它 - 使用纯Javascript

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

Answer 5

只需将"javascript:void(0)"替换为href标记中的"#"

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

Answer 6

这对我有用

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

Answer 7

您可以使用：

event.stopPropagation();

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

Answer 8

另一种方法是使用event属性内的对象onclick（无需向函数添加额外的参数来传递事件）

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

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

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 的变体 2；如果必须快点的话。以及变体 4 (AddEventListener)。