จะป้องกันการจัดการเหตุการณ์เริ่มต้นในวิธี onclick ได้อย่างไร?

จะป้องกันค่าเริ่มต้นในวิธี onclick ได้อย่างไร? ฉันมีวิธีการที่ฉันกำลังส่งค่าที่กำหนดเองด้วย

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

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

ให้โทรกลับของคุณกลับมา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;
}

อย่างไรก็ตามในการสร้างโค้ดที่บำรุงรักษาได้คุณควรละเว้นจากการใช้"inline 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 */
});

ในความคิดของฉันคำตอบนั้นผิด! เขาถามว่าevent.preventDefault();คุณกลับเท็จเมื่อไหร่ มันเรียก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();
}

ลองใช้สิ่งนี้ (แต่โปรดใช้ปุ่มสำหรับกรณีดังกล่าวหากคุณไม่มีhrefค่าที่ถูกต้องสำหรับการย่อยสลายอย่างสง่างาม )

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

คุณสามารถจับเหตุการณ์แล้วบล็อกได้ด้วย PreventDefault () - ทำงานร่วมกับ Javascript แท้

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

เพียงวาง "javascript: void (0)" แทนที่ "#" ในแท็ก href

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

สิ่งนี้ได้ผลสำหรับฉัน

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

คุณสามารถใช้ได้:

event.stopPropagation();

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

อีกวิธีในการทำเช่นนั้นคือการใช้eventวัตถุภายในแอตทริบิวต์onclick(โดยไม่จำเป็นต้องเพิ่มอาร์กิวเมนต์เพิ่มเติมให้กับฟังก์ชันเพื่อส่งผ่านเหตุการณ์)

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

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

มันจะน่าเบื่อเกินไปที่จะใช้งานฟังก์ชั่นที่แตกต่างกันในหน้า 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 ล่าสุดเข้าเยี่ยมชมได้อย่างถูกต้อง href="#"หลังจากตัวจัดการเหตุการณ์ onclick เสร็จสิ้น

เครดิต:

• คุณค้นหาฟังก์ชันผู้โทรใน JavaScript ได้อย่างไร?
• event.preventDefault () ฟังก์ชันไม่ทำงานใน IE

หากต้องใส่ในแท็ก ไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด แต่จะได้ผล

อย่าลืมใส่เหตุการณ์ onclick ไว้หน้า href ใช้ได้เฉพาะกับวิธีนี้ของฉัน

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

ให้คลาสหรือ id ให้กับองค์ประกอบและใช้ฟังก์ชัน jquery unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });