Bagaimana cara melepaskan ikatan pendengar yang memanggil event.preventDefault () (menggunakan jQuery)?

128

jquery mengaktifkan panggilan preventDefault () secara default, sehingga default tidak berfungsi. Anda tidak dapat mengklik kotak centang, Anda tidak dapat mengklik tautan dll

apakah mungkin mengembalikan handler default?

Stijn de Witt
sumber
Bisakah Anda memberikan beberapa contoh kode?
Jojo
4
Pertanyaan dalam judul adalah pertanyaan yang fantastis! Sayang sekali pertanyaan yang sebenarnya bukan ... Saya berharap untuk menemukan di sini, jawaban untuk bagaimana (jika memungkinkan) kita dapat 'menghapus' efek preventDefaultsetelah dipanggil. Saat ini pertanyaan ini sebenarnya 'bagaimana cara melepaskan ikatan pendengar acara dengan jQuery?'.
Stijn de Witt

Jawaban:

80

Dalam kasus saya:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); berfungsi sebagai satu-satunya metode untuk mengembalikan tindakan default.

Seperti yang terlihat di sini: https://stackoverflow.com/a/1673570/211514

klaus
sumber
2
Jika elemen ini memiliki penangan klik lain, Anda
membatalkan ikatan
56

Cukup sederhana

Mari kita anggap Anda melakukan sesuatu seperti

document.ontouchmove = function(e){ e.preventDefault(); }

sekarang untuk mengembalikannya ke situasi semula, lakukan di bawah ini ...

document.ontouchmove = function(e){ return true; }

Dari situs web ini .

foxybagga
sumber
Solusi ini tidak berfungsi setelah $ ('# a_link'). Klik (fungsi (e) {e.preventDefault ();}); gunakan fungsi unbind.
Denis Makarskiy
2
Tautan yang Anda berikan rusak.
Stacked
16

Tidak mungkin mengembalikan preventDefault()tetapi yang bisa Anda lakukan adalah mengelabui :)

<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
   if($(this).hasClass('prevented')){
       e.preventDefault();
       $(this).removeClass('prevented');
   }else{
       $(this).addClass('prevented');
   }
});
</script>

Jika Anda ingin melangkah lebih jauh, Anda bahkan dapat menggunakan tombol pemicu untuk memicu suatu peristiwa.

Val
sumber
Saya cukup yakin itu - saya melakukan ini pada desain baru-baru ini. Pada awalnya dengan mengklik tombol, saya mencegah gulir di iPhone dengan menambahkan e.preventDefault pada acara touchmove dan kemudian setelah animasi selesai saya kembali benar dan itu bekerja seperti pesona.
foxybagga
11
function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);
Atara
sumber
Cara kerjanya bagi saya adalah: $ (dokumen) .off ('touchmove'); $ (dokumen) .on ('touchmove', function () {return true;});
rogervila
9

dalam beberapa kasus * Anda awalnya dapat return falsebukannya e.preventDefault(), kemudian ketika Anda ingin mengembalikan ke default return true.

* Berarti ketika Anda tidak keberatan acara itu menggelegak dan Anda tidak menggunakannya e.stopPropagation()bersamae.preventDefault()

Lihat juga pertanyaan serupa (juga di stack Overflow)

atau dalam hal kotak centang Anda dapat memiliki sesuatu seperti:

$(element).toggle(function(){
  $(":checkbox").attr('disabled', true);
  },
function(){
   $(":checkbox").removeAttr('disabled');
}) 
adardesign
sumber
9

Anda dapat mengembalikan tindakan default (jika ini adalah HREF follow) dengan melakukan ini:

window.location = $(this).attr('href');

Crmpicco
sumber
2
ide itu benar tetapi kode di luar kotak tidak bekerja untuk saya (kecuali jika itu hanya perubahan sintaks dalam jquery) saya menggunakan: window.location = $ (this) .attr ('href');
Modika
3

jika itu tautan maka $(this).unbind("click"); akan mengaktifkan kembali tautan yang mengklik dan perilaku default akan dikembalikan.

Saya telah membuat demo JS fiddle untuk mendemonstrasikan cara kerjanya:

Berikut adalah kode biola JS:

HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>

Javascript:

<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
  event.preventDefault();

  $( "<div>" )
    .append( "default " + event.type + " prevented "+counter )
    .appendTo( "#log" );

    if(counter == 2)
    {
        $( "<div>" )
    .append( "now enable click" )
    .appendTo( "#log" );

    $(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
    }
    else
    {
        $( "<div>" )
    .append( "still disabled" )
    .appendTo( "#log" );
    }
    counter++;
});
});
</script>
Rahul Gupta
sumber
2

Uji kode ini, saya pikir selesaikan masalah Anda:

event.stopPropagation();

Referensi

Alireza MH
sumber
Anda harus menghentikanPropagation pada handler yang terjadi sebelum handler yang mencegah default. Anda dapat melakukan ini pada capturePhase jika pawang Anda yang lain terdaftar pada fase gelembung.
Vitim.us
2

Cara terbaik untuk melakukan ini dengan menggunakan namespace. Ini adalah cara yang aman dan terjamin. Di sini .rb adalah namespace yang memastikan fungsi unbind bekerja pada keydown tertentu tetapi tidak pada yang lain.

$(document).bind('keydown.rb','Ctrl+r',function(e){
            e.stopImmediatePropagation();
            return false;
        });

$(document).unbind('keydown.rb');

ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref2: http://jqfundamentals.com/chapter/events

Rajkumar Bansal
sumber
1

Nonaktifkan:

document.ontouchstart = function(e){ e.preventDefault(); }

Memungkinkan:

document.ontouchstart = function(e){ return true; }
Brynner Ferreira
sumber
1

Metode preventDefault () antarmuka acara memberi tahu agen pengguna bahwa jika acara tidak ditangani secara eksplisit, tindakan defaultnya tidak boleh diambil seperti biasanya. Acara terus menyebar seperti biasa, kecuali salah satu pendengar acara memanggil stopPropagation () atau stopImmediatePropagation (), yang mana keduanya menghentikan propagasi sekaligus.

Memanggil preventDefault () selama setiap tahap aliran acara membatalkan acara, yang berarti bahwa tindakan default apa pun yang biasanya diambil oleh implementasi sebagai akibat dari peristiwa tidak akan terjadi.

Anda dapat menggunakan Event.cancelable untuk memeriksa apakah acara tersebut dapat dibatalkan. Memanggil preventDefault () untuk acara yang tidak dapat dibatalkan tidak berpengaruh.

window.onKeydown = event => {
    /*
        if the control button is pressed, the event.ctrKey 
        will be the value  [true]
    */

    if (event.ctrKey && event.keyCode == 83) {
        event.preventDefault();
        // you function in here.
    }
}
João Victor Palmeira
sumber
0

Saya punya masalah ketika saya membutuhkan tindakan default hanya setelah beberapa tindakan kustom (mengaktifkan bidang input yang dinonaktifkan di formulir) telah selesai. Saya membungkus tindakan default (kirim ()) ke fungsi rekursif sendiri (dosubmit ()).

var prevdef=true;
var dosubmit=function(){
    if(prevdef==true){
        //here we can do something else first//
        prevdef=false;
        dosubmit();
    }
    else{
        $(this).submit();//which was the default action
    }
};

$('input#somebutton').click(function(){dosubmit()});
Gyula
sumber
1
Catatan umum: Meskipun beberapa coders merasa if (predef == true)lebih eksplisit, Anda menambahkan 7 karakter ke kode JS Anda tanpa alasan. if (prevdef)sama terbaca. Selain itu, Anda telah menambahkan pengendali acara anonim yang berlebihan saat .click(dosubmit)melakukan hal yang sama .click(function(){dosubmit()})karena tidak ada parameter yang diteruskan.
Lewat Kode
0

Gunakan boolean:

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

Saya menggunakan ini di Aplikasi Web Progresif untuk mencegah pengguliran / perbesaran pada beberapa 'halaman' sambil mengizinkan yang lain.

TennisVisuals
sumber
0

Anda dapat mengatur untuk membentuk 2 kelas. Setelah Anda mengatur skrip JS Anda ke salah satunya, ketika Anda ingin menonaktifkan skrip Anda, Anda cukup menghapus kelas dengan skrip berikat dari formulir ini.

HTML:

<form class="form-create-container form-create"> </form>   

JS

$(document).on('submit', '.form-create', function(){ 
..... ..... ..... 
$('.form-create-container').removeClass('form-create').submit();

});
Dumitru Boaghi
sumber
-3
$('#my_elementtt').click(function(event){
    trigger('click');
});
T.Todua
sumber
-10

Saya tidak yakin Anda yang Anda maksudkan: tapi inilah solusi untuk masalah yang serupa (dan mungkin sama) ...

Saya sering menggunakan preventDefault () untuk mencegat item. Namun: itu bukan satu-satunya metode intersepsi ... sering kali Anda mungkin hanya ingin "pertanyaan" mengikuti perilaku mana yang berlanjut seperti sebelumnya, atau berhenti. Dalam kasus baru-baru ini saya menggunakan solusi berikut:

$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));

Pada dasarnya, "cegah default" dimaksudkan untuk mencegat dan melakukan sesuatu yang lain: "konfirmasi" dirancang untuk digunakan dalam ... mengonfirmasi dengan baik!

elb98rm
sumber