Menonaktifkan Klik-Kanan dengan jQuery

Tabel Konten
  1. Dasar Ide 
  2. Langkah Selengkapnya 
  3. Lebih Lanjut 

Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:

Lihat Demo

Dasar Ide 

Ide dasar dari pembuatan sistem keamanan ini adalah dari plugin jQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, kemudian kita jalankan fungsi .rightClick() untuk menampilkan overlay saat aksi klik-kanan dilakukan:

/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });

    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});

Langkah Selengkapnya 

Berikut ini adalah langkah-langkah selengkapnya untuk menciptakan sistem keamanan seperti pada halaman demo:

  • Pertama-tama pastikan dulu bahwa temamu sudah dilengkapi dengan jQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu kemudian salin script jQuery-nya saja. Plugin easing tidak diperlukan dalam proyek ini.
  • Setelah itu salin kode ini kemudian letakkan tepat di bawah jQuery tadi:

    <script>
    /*
    jQuery Right-Click Plugin
    Version 1.01
    Cory S.N. LaViska
    A Beautiful Site (http://abeautifulsite.net/)
    */
    if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);
    
    // Jalankan fungsi...
    $(function() {
        $(document).rightClick(function(e) {
             $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
        });
        $('#no-right-click-overlay').click(function() {
             $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
        });
    });
    </script>
  • Berikutnya letakkan elemen ini tepat di atas tag </body>:

    <div id='no-right-click-overlay'>
    Teks peringatan di sini...
    </div>
  • Terakhir, Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

    #no-right-click-overlay {
      background:#000;
      font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif;
      color:#f10c0c;
      position:fixed !important;
      position:absolute;
      top:0px;
      right:0px;
      bottom:0px;
      left:0px;
      width:90%;
      height:100%;
      text-align:center;
      padding:5%;
      display:none;
    }
  • Klik Simpan Tema.

Lebih Lanjut 

Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa Saya akan melarang orang lain melakukan aksi klik-kanan pada semua area dalam dokumen. Namun, jika Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) bisa Anda ganti dengan selektor lain. Misalnya seperti ini:

$('#terlarang').rightClick(function(e) { $('#no-right-click-overlay').show(); });

Kode di atas akan melarang orang lain untuk melakukan aksi klik-kanan pada area #terlarang saja, sedangkan untuk area lainnya dapat dikenai aksi klik-kanan:

Lihat Demo

7 Komentar

  • Unknown

    ini baru mantep, waktu itu aku gak ngerti kalau cuman kode anti klik kananx

  • Taufik Nurrohman

    @system of blog: Nggak juga sih. Ini cuma plugin untuk membuat event klik-kanan. Dalam JQuery kan belum ada event klik-kanan.
    Masalah penggunaannya tidak hanya sebatas untuk anti klik-kanan saja. Aktivitas apa saja yang dilakukan dengan klik-kanan bisa dilakukan.

  • Anonim

    tapi sayangnya masih bisa pake ctrl+u,...

  • Taufik Nurrohman

    @hersyaziko/hevanmahesa Tidak ada sesuatu yang benar-benar bisa dilindungi dalam dunia internet. Ini cuma sebagai pengetahuan saja.

  • Unknown

    oAlahmas...... Kirain Tulisan Page source nxa hilang ternyata... Hayo lho X@

  • Unknown

    kang, kalo di klik kanan pada bagian adsense google atau adsense lainnya seperti camp atau lain lain, itu bisa dklik kanan, saya lagi nyari gimana cara buat blog gk bisa dklik kanan pada bagian manapun di blog kita... gitu,,, bisa nggk kang???

  • Unknown

    min punya saya pas diklik kiri ga mau balik lagi gimana itu

Komentar telah ditutup.