Menonaktifkan Klik-Kanan dengan jQuery

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