blocks|key|810485|text|在我看来，答案是错误的！当您只返回false时，他要求使用event.preventDefault();；它还会调用event.preventDefault();和event.stopPropagation();！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|810486|你可以这样解决这个问题：|810487|<a+href="#"+onclick="callmymethod(event,+24)">Call</a>|code-block|syntax|javascript|810488|function+callmymethod(e,+myVal){
++++//doing+custom+things+with+myVal

++++//here+I+want+to+prevent+default
++++e+=+e+%7C%7C+window.event;
++++e.preventDefault();
}|810489|entityMap^0|T|N|1M|N|2A|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>In my opinion the answer is wrong! He asked for <code>event.preventDefault();</code> when you simply return false; it calls <code>event.preventDefault();</code> AND <code>event.stopPropagation();</code> as well!</p>

<p>You can solve it by this:</p>

<pre><code>&lt;a href="#" onclick="callmymethod(event, 24)"&gt;Call&lt;/a&gt;
</code></pre>



<pre><code>function callmymethod(e, myVal){
    //doing custom things with myVal

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


blocks|key|594951|text|试试这个(但是如果你没有有效的graceful+degradation的href值，请在这种情况下使用按钮)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|594952|<a+href="#"+onclick="callmymethod(24);+return+false;">Call</a>|code-block|syntax|javascript|594953|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement#Graceful_degradation_and_progressive_enhancement_in_a_nutshell^0|10|4|F|K|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Try this (but please use buttons for such cases if you don't have a valid <code>href</code> value for <a href="https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement#Graceful_degradation_and_progressive_enhancement_in_a_nutshell" rel="noreferrer">graceful degradation</a>)</p>
<pre><code>&lt;a href=&quot;#&quot; onclick=&quot;callmymethod(24); return false;&quot;&gt;Call&lt;/a&gt;
</code></pre>


blocks|key|810602|text|您可以捕获事件，然后使用preventDefault()阻止它--使用纯Javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810603|document.getElementById("xyz").addEventListener('click',+function(event){
++++event.preventDefault();
++++console.log(this.getAttribute("href"));
++++/*+Do+some+other+things*/
});|code-block|syntax|javascript|810604|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can catch the event and then block it with preventDefault() -- works with pure Javascript</p>

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


blocks|key|595044|text|只需在href标签中放置"javascript:void(0)"，而不是"#“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|595045|<a+href="javascript:void(0);"+onclick="callmymethod(24)">Call</a>|code-block|syntax|javascript|595046|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just place "javascript:void(0)", in place of "#" in href tag</p>

<pre><code>&lt;a href="javascript:void(0);" onclick="callmymethod(24)"&gt;Call&lt;/a&gt;
</code></pre>


blocks|key|595140|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|595141|<a+href="javascript:;"+onclick="callmymethod(24);+return+false;">Call</a>|code-block|syntax|javascript|595142|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me</p>

<pre><code>&lt;a href="javascript:;" onclick="callmymethod(24); return false;"&gt;Call&lt;/a&gt;
</code></pre>


blocks|key|595150|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|595151|event.stopPropagation();|code-block|syntax|javascript|595152|https://dom.spec.whatwg.org/#dom-event-stoppropagation|offset|length|595153|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1I|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>You can use:</p>
<pre><code>event.stopPropagation();
</code></pre>
<p><a href="https://dom.spec.whatwg.org/#dom-event-stoppropagation" rel="nofollow noreferrer">https://dom.spec.whatwg.org/#dom-event-stoppropagation</a></p>


blocks|key|810766|text|另一种方法是在属性onclick中使用event对象(不需要向函数添加额外的参数来传递事件)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|810767|​|810768|function+callmymethod(myVal){
++++console.log(myVal);
}|code-block|syntax|javascript|810769|<a+href="#link"+onclick="event.preventDefault();callmymethod(24)">Call</a>|810770|810771|entityMap^0|9|7|J|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>Another way to do that is to use the <code>event</code> object inside the attribute <code>onclick</code> (without the need to add an additional argument to the function to pass the event)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function callmymethod(myVal){
    console.log(myVal);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#link" onclick="event.preventDefault();callmymethod(24)"&gt;Call&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|810827|text|几种不同的答案。即使在这么多年之后，这个问题仍然是相关的。因此，下面是编译过程：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810828|​|810829|//+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"));
});|code-block|syntax|javascript|810830|<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>|810831|810832|我更喜欢带return+false的变体2；如果它必须快速运行的话。以及变体4+(AddEventListener)。|810833|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Several different answers. Even after so many years, the question is still relevant. Therefore, here is the compilation:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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"));
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;onclick Attribute&lt;/h3&gt;
&lt;div&gt;
  &lt;a href="/hello" onclick="myFn1(event, 42)"&gt;Click 1&lt;/a&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;a href="/hello" onclick="return myFn2(42)"&gt;Click 2&lt;/a&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;a href="/hello" onclick="myFn3(42); return false;"&gt;Click 3&lt;/a&gt;
&lt;/div&gt;

&lt;h3&gt;EventListener (addEventListener)&lt;/h3&gt;
&lt;div&gt;
  &lt;a href="/hello" id="clicki-1" data-value="42"&gt;Click 4&lt;/a&gt;
&lt;/div&gt;

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

&lt;div&gt;  
  &lt;a href="javascript:void(0);" onclick="myFn3(42)"&gt;Click 6&lt;/a&gt;
&lt;/div&gt;

&lt;div&gt;  
  &lt;a href="javascript:;" onclick="myFn3(42)"&gt;Click 7&lt;/a&gt;
&lt;/div&gt;

&lt;h5&gt;Set Anchor Hashtag&lt;/h5&gt;
&lt;div&gt;  
  &lt;a href="#" onclick="myFn3(42)"&gt;Click 8&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>I prefer the variant 2 with return false; if it has to go quickly. And otherwise variant 4 (AddEventListener).</p>


blocks|key|810678|text|如果你需要把它放在标签里。这不是最好的解决方案，但它会起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810679|确保将onclick事件放在href前面。只为我的这种方式工作。|810680|<a+onclick="return+false;"+href="//www.google.de">Google</a>|code-block|syntax|javascript|810681|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you need to put it in the tag. Not the finest solution, but it will work.</p>

<p>Make sure you put the onclick event in front of the href. Only worked for my this way.</p>

<pre><code>&lt;a onclick="return false;" href="//www.google.de"&gt;Google&lt;/a&gt;
</code></pre>


blocks|key|595074|text|给元素一个类或id，并使用jquery函数unbind()；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|595075|$(".slide_prevent").click(function(){
++++++++++++++++$(".slide_prevent").unbind();
++++++++++++++});|code-block|syntax|javascript|595076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Give a class or id to the element and use jquery function unbind();</p>

<pre><code>$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });
</code></pre>


<p>How to prevent default in an onclick method? I have a method in which I am also passing a custom value</p>

<pre><code>&lt;a href="#" onclick="callmymethod(24)"&gt;Call&lt;/a&gt;
</code></pre>



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


How to prevent default event handling in an onclick method?

如何在onclick方法中防止默认？我有一个方法，在这个方法中我还传递了一个自定义值<a href="#" onclick="callmymethod(24)">Call</a>function callmymethod(myVal){    //doing custom things with myVal    //here I want to prevent default}

问如何防止onclick方法中的默认事件处理？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止onclick方法中的默认事件处理？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止onclick方法中的默认事件处理？
EN