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 templatemu 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 type='text/javascript'>
  /*
  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 Template.

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