ตรงกันข้ามกับ evt.preventDefault () คืออะไร;


185

เมื่อฉันevt.preventDefault()เริ่มต้นแล้วฉันจะเริ่มต้นการดำเนินการเริ่มต้นใหม่ได้อย่างไร


3
ฉันคิดว่าโดยทั่วไปฟังก์ชั่นของคุณจะทำงานและจากนั้นพฤติกรรมเริ่มต้นจะทำงานดังนั้นคุณจะไม่เรียก evt.preventDefault () ในตอนแรก
Prescott

1
เป็นไปได้ซ้ำไหม : stackoverflow.com/questions/1551389/…
โนบิตะ

2
@Nobita - ฉันไม่แน่ใจ ... สิ่งนั้นเฉพาะเจาะจงกับ jQuery
gilly3

1
ว้าวขอบคุณสำหรับคำตอบด่วน! ปัญหาของฉันคือว่าฉันไม่ใช่คนที่ใช้ evt.preventDefault (); ฉันใช้แอพพลิเคชั่นแฟลชของบุคคลที่สามใน Lightbox เมื่อฉันปิดไลท์บ็อกซ์บางครั้งมูสของฉันสำหรับการเลื่อนหน้าหยุด ในการทำวิจัยบางอย่างฉันพบว่าแอพแฟลชนี้ปิดใช้งานการเลื่อนหน้าเนื่องจากคุณสมบัติซูม ดังนั้นตอนนี้ฉันกำลังพยายามเลื่อนหน้าต่อเมื่อแอปถูกปิด อาจมีวิธีการบางอย่างที่ฉันสามารถโทรเพื่อให้เกิดเหตุการณ์ล้อเลื่อนของเมาส์อีกครั้งได้?
ไบรอัน

คำตอบ:


90

ตามความเห็นโดย @Prescott ตรงข้ามของ:

evt.preventDefault();

อาจจะเป็น:

โดยพื้นฐานแล้วเท่ากับ'เริ่มต้น'เนื่องจากเราไม่ได้ป้องกันอีกต่อไป

มิฉะนั้นฉันอยากจะแนะนำคุณไปยังคำตอบที่ได้รับจากความคิดเห็นและคำตอบอื่น:

วิธีการยกเลิกการผูกฟังที่เรียก event.preventDefault () (ใช้ jQuery)?

จะเปิดใช้งาน event.preventDefault อีกครั้งได้อย่างไร

โปรดทราบว่าโซลูชันที่สองได้รับการยอมรับพร้อมโซลูชันตัวอย่างซึ่งกำหนดโดย redsquare (โพสต์ที่นี่เพื่อรับการแก้ไขโดยตรงในกรณีที่ไม่ได้ปิดเหมือนกัน):

$('form').submit( function(ev) {
     ev.preventDefault();
     //later you decide you want to submit
     $(this).unbind('submit').submit()
});

ขอบคุณ! กำลังเกาหัวของฉันสักครู่บนนี้ (ฉันจำเป็นต้องหยุดและตรวจสอบบางสิ่งก่อนส่งแบบฟอร์มไม่ส่งในบางสถานการณ์ส่งในอื่น ๆ )
Katharine Osborne

1
มันใช้งานได้ แต่ฉันไม่เข้าใจว่าทำไมการส่งแบบฟอร์มต่อไปถึงเรียกฟังก์ชั่นอีกครั้งฉันคิดว่ามันจะยกเลิกการผูกมันแน่นอน แต่ดูเหมือนว่าจะเป็นการผูกเฉพาะสำหรับการโทรปัจจุบัน ... ฉันไม่สามารถอธิบายได้ สิ่งที่ฉันต้องการ แต่ไม่ใช่สิ่งที่ฉันคาดหวัง
Vadorequest

53
function(evt) {evt.preventDefault();}

และตรงกันข้าม

function(evt) {return true;}

ไชโย!


8
สิ่งนี้ใช้ได้กับฉัน แต่ฉันสงสัยว่าถ้าใครสามารถอธิบายได้ดีขึ้นเล็กน้อยว่าทำไม?
edhedges

11
สิ่งนี้ไม่ได้เลิกทำการป้องกัน preventDefault () อันที่จริงแล้วมันจะเหมือนกับว่าคุณจะreturn true:
br4nnigan

19

ในการประมวลผลคำสั่งก่อนดำเนินการลิงก์จากclickเหตุการณ์ใน jQuery:

เช่น: <a href="http://google.com/" class="myevent">Click me</a>

ป้องกันและติดตามด้วย jQuery:

$('a.myevent').click(function(event) {
    event.preventDefault();

    // Do my commands
    if( myEventThingFirst() )
    {
      // then redirect to original location
      window.location = this.href;
    }
    else
    {
      alert("Couldn't do my thing first");
    }
});

หรือเพียงแค่เรียกใช้window.location = this.href;หลังจากpreventDefault();


3
ถูกต้อง แต่สิ่งนี้จะถือว่าการป้องกันการผิดพลาดเป็นลิงค์และไม่พูดถึง touchmove บนตัวเอกสาร
กรุงเทพ

4
นี่ไม่ใช่คำถามที่ถาม
Matt Fletcher

8

ฉันต้องชะลอการส่งแบบฟอร์มใน jQuery เพื่อดำเนินการเรียกแบบอะซิงโครนัส นี่คือรหัสที่เรียบง่าย ...

$("$theform").submit(function(e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax('/path/to/script.php',
        {
        type: "POST",
        data: { value: $("#input_control").val() }
    }).done(function(response) {
        $this.unbind('submit').submit();
    });
});

ตัวเลือกอื่นในสถานการณ์นี้อาจใช้ input type = "button" และเชื่อมโยงกับเหตุการณ์คลิกแทนที่จะใช้ input type = "submit" และเชื่อมโยงกับเหตุการณ์ส่ง
Strixy

8

ตกลง ! ใช้งานได้กับเหตุการณ์คลิก:

$("#submit").click(function(e){ 

   e.preventDefault();

  -> block the click of the sumbit ... do what you want

$("#submit").unbind('click').click(); // the html click submit work now !

});


4

ฉันอยากจะแนะนำรูปแบบต่อไปนี้:

document.getElementById("foo").onsubmit = function(e) {
    if (document.getElementById("test").value == "test") {
        return true;
    } else {
        e.preventDefault();
    }
}

<form id="foo">
    <input id="test"/>
    <input type="submit"/>
</form>

... ถ้าฉันไม่มีอะไรหายไป

http://jsfiddle.net/DdvcX/


4

ไม่มีวิธีที่ตรงกันข้ามที่event.preventDefault()จะเข้าใจว่าทำไมคุณต้องดูว่าevent.preventDefault()เมื่อคุณเรียกมันว่าอะไร

ภายใต้ประทุนฟังก์ชั่นสำหรับป้องกันการเริ่มต้นคือการเรียกคืนเท็จซึ่งหยุดการดำเนินการใด ๆ เพิ่มเติม หากคุณคุ้นเคยกับวิธีการแบบเก่าของ Javascript การใช้ return false ในการยกเลิกเหตุการณ์ในสิ่งต่าง ๆ เช่นการส่งแบบฟอร์มและปุ่มโดยใช้ return true (ก่อนที่ jQuery จะอยู่ใกล้เคียง)

ในขณะที่คุณอาจได้ผลแล้วตามคำอธิบายง่ายๆข้างต้น: สิ่งที่ตรงกันข้ามevent.preventDefault()คือไม่มีอะไร คุณไม่ได้ป้องกันเหตุการณ์โดยค่าเริ่มต้นเบราว์เซอร์จะอนุญาตให้มีเหตุการณ์หากคุณไม่ได้ป้องกัน

ดูคำอธิบายด้านล่าง:

;(function($, window, document, undefined)) {

    $(function() {
        // By default deny the submit
        var allowSubmit = false;

        $("#someform").on("submit", function(event) {

            if (!allowSubmit) {
                event.preventDefault();

                // Your code logic in here (maybe form validation or something)
                // Then you set allowSubmit to true so this code is bypassed

                allowSubmit = true;
            }

        });
    });

})(jQuery, window, document);

ในรหัสข้างต้นคุณจะสังเกตเห็นว่าเรากำลังตรวจสอบว่า allowSubmit เป็นเท็จ ซึ่งหมายความว่าเราจะป้องกันไม่ให้แบบฟอร์มของเราจากการส่งโดยใช้event.preventDefaultและจากนั้นเราจะทำตรรกะการตรวจสอบและถ้าเรามีความสุขตั้งอนุญาตให้ส่งเป็นจริง

นี่เป็นวิธีที่มีประสิทธิภาพวิธีเดียวในการทำสิ่งที่ตรงกันข้ามevent.preventDefault()- คุณสามารถลองลบกิจกรรมได้เช่นกัน


4

นี่คือสิ่งที่มีประโยชน์ ...

ก่อนอื่นเราจะคลิกที่ลิงค์ใช้รหัสและเราจะดำเนินการเริ่มต้น สิ่งนี้จะเป็นไปได้โดยใช้event.currentTargetลองดู ที่นี่เราจะพยายามเข้าถึง Google บนแท็บใหม่ แต่ก่อนที่เราจะต้องเรียกใช้รหัสบางอย่าง

<a href="https://www.google.com.br" target="_blank" id="link">Google</a>

<script type="text/javascript">
    $(document).ready(function() {
        $("#link").click(function(e) {

            // Prevent default action
            e.preventDefault();

            // Here you'll put your code, what you want to execute before default action
            alert(123); 

            // Prevent infinite loop
            $(this).unbind('click');

            // Execute default action
            e.currentTarget.click();
        });
    });
</script>

2

นี่คือสิ่งที่ฉันใช้ในการตั้งค่า:

$("body").on('touchmove', function(e){ 
    e.preventDefault(); 
});

และเพื่อยกเลิก:

$("body").unbind("touchmove");

2

ไม่มีวิธีแก้ไขช่วยฉันที่นี่และฉันทำสิ่งนี้เพื่อแก้ไขสถานการณ์ของฉัน

<a onclick="return clickEvent(event);" href="/contact-us">

และฟังก์ชั่นclickEvent(),

function clickEvent(event) {
    event.preventDefault();
    // do your thing here

    // remove the onclick event trigger and continue with the event
    event.target.parentElement.onclick = null;
    event.target.parentElement.click();
}

2

ฉันคิดว่า "ตรงกันข้าม" คือการจำลองเหตุการณ์ คุณสามารถใช้.createEvent()

ติดตามตัวอย่างของ Mozilla:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var cancelled = !cb.dispatchEvent(evt);
  if(cancelled) {
    // A handler called preventDefault
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault
    alert("not cancelled");
  }
}

Ref: document.createEvent


jQuery มี.trigger()เพื่อให้คุณสามารถเรียกใช้เหตุการณ์ในองค์ประกอบ - บางครั้งมีประโยชน์

$('#foo').bind('click', function() {
      alert($(this).text());
});

$('#foo').trigger('click');

1

jquery on ()อาจเป็นวิธีแก้ปัญหานี้อีก escpacially เมื่อมันมาถึงการใช้namespaces namespaces

jquery on () เป็นเพียงวิธีปัจจุบันของเหตุการณ์ที่มีผลผูกพัน (แทนการผูก ()) off () คือการผูกสิ่งเหล่านี้ และเมื่อคุณใช้เนมสเปซคุณสามารถเพิ่มและลบเหตุการณ์ต่าง ๆ ได้หลายรายการ

$( selector ).on("submit.my-namespace", function( event ) {
    //prevent the event
    event.preventDefault();

    //cache the selector
    var $this = $(this);

    if ( my_condition_is_true ) {
        //when 'my_condition_is_true' is met, the binding is removed and the event is triggered again.
        $this.off("submit.my-namespace").trigger("submit");
    }
});

ขณะนี้ด้วยการใช้เนมสเปซคุณสามารถเพิ่มเหตุการณ์เหล่านี้หลายรายการและสามารถลบกิจกรรมเหล่านั้นได้ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ .. ในขณะที่การส่งอาจไม่ใช่ตัวอย่างที่ดีที่สุด


1

นี่ไม่ใช่คำตอบสำหรับคำถามโดยตรง แต่อาจช่วยใครซักคน ประเด็นของฉันคือคุณโทรไปยัง PreventDefault () ตามเงื่อนไขบางประการเนื่องจากไม่มีเหตุการณ์ที่จะเกิดขึ้นหากคุณเรียกว่า PreventDefault () สำหรับทุกกรณี ดังนั้นหากว่ามีเงื่อนไขและการเรียก PreventDefault () ก็ต่อเมื่อเงื่อนไข / s เป็นที่พอใจจะทำงานในลักษณะปกติสำหรับกรณีอื่น ๆ

$('.btnEdit').click(function(e) {

   var status = $(this).closest('tr').find('td').eq(3).html().trim();
   var tripId = $(this).attr('tripId');

  if (status == 'Completed') {

     e.preventDefault();
     alert("You can't edit completed reservations");

 } else if (tripId != '') {

    e.preventDefault();
    alert("You can't edit a reservation which is already attached to a trip");
 }
 //else it will continue as usual

});


0

คุณสามารถใช้สิ่งนี้หลังจากวิธี "PreventDefault"

// ที่นี่ evt.target ส่งคืนเหตุการณ์เริ่มต้น (เช่น: defult url ฯลฯ )

var defaultEvent=evt.target;

// ที่นี่เราบันทึกเหตุการณ์เริ่มต้น ..

if("true")
{
//activate default event..
location.href(defaultEvent);
}

0

คุณสามารถใช้สิ่งที่แนบมานี้กับเหตุการณ์คลิกบางส่วนในสคริปต์ของคุณ:

location.href = this.href;

ตัวอย่างของการใช้งานคือ:

jQuery('a').click(function(e) {
    location.href = this.href;
});

-1

รหัสนี้ทำงานสำหรับฉันที่จะยกตัวอย่างเหตุการณ์หลังจากที่ฉันใช้:

event.preventDefault(); to disable the event.


event.preventDefault = false;

-2

ฉันใช้รหัสต่อไปนี้ มันใช้งานได้ดีสำหรับฉัน

$('a').bind('click', function(e) {
  e.stopPropagation();
});

2
ดังที่อธิบายไว้ในเอกสารประกอบ jQuery APIสิ่งนี้จะป้องกันไม่ให้เหตุการณ์เดือดดาลต้นไม้ DOM ป้องกันไม่ให้ตัวจัดการหลักใด ๆ จากการแจ้งเตือนของเหตุการณ์ นั่นไม่เหมือนกับ / หรือตรงข้ามevent.preventDefault();
ᴍᴀᴛᴛʙᴀᴋᴇʀ

2
นี่ไม่ใช่คำถามที่ถาม
Matt Fletcher
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.