Web sitesinde sağ tuşa basılmasını ya da içeriği seçilmesini engellemek kullanıcı deneyimi açısından yapılabilecek en büyük hatalardan biridir.

Bu konudaki yazımı buradan okuyabilirsiniz: Neden Sağ Tuş Kilidi Koymak Yanlıştır?

Buna rağmen zaman zaman müşteriler bu konuda ısrarcı olabilir. Bu durumda yapılaabilecek en iyi şeylerden bir tanesi sağ tuş menüsünü alternatif bir context menü ile değiştirmektir. Her ne kadar temel tarayıcı fonksiyonlarını yine engellemiş olsak da en azından kullanıcıya engellenmiş hissi yaratmamıza yardımcı olur.

İlk önce sağ tuş menümüzün HTML kısmını oluşturuyoruz. Basit bir örnek olması için 3 seçenkli küçük bir menü oluşturdum.

    <ul class="custom-menu">
        <li data-action="first">Telefon Numaramız</li>
        <li data-action="second">E-Posta Adresimiz</li>
        <li data-action="third">Telif Bildirimi</li>
    </ul>

Yapacağımız diğer işlem bu menüyü biçimlendirmek. İlk açılışta gizlememiz ve posiyonunu absolute belirlememiz gerekiyor. Aşağıda menü için gerekli olan tüm biçimler bulunmaktadır.

.custom-menu {
    display: none;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    z-index: 64000;
    list-style-type: none;
    padding: 0;
}

    .custom-menu li {
        padding: 8px 12px;
        cursor: pointer;
    }

        .custom-menu li:hover {
            background-color: #DEF;
        }

Ek olarak kullanıcının seçim yapmasını engelleyebiliriz.

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Sıra JavaScript kısmında yorumları takip etmeyi unutmayın.

$(document).bind("contextmenu", function (event) { //Sağ tuş menüsüne kancalan
    event.preventDefault(); //Tarayıcı menüsünü engelle
    $(".custom-menu").finish().toggle(100). //Özel menüyü göster
            css({
                top: event.pageY + "px", //Mouse'un y eksen pozisyonu üste
                left: event.pageX + "px" //Mouse'un x eksen pozisyonu sola
            });
});

$(document).bind("mousedown", function (e) { //Herhangi bir yere tıklandığında
    if (!$(e.target).parents(".custom-menu").length > 0) { //Menü içerisinde değilsen
        $(".custom-menu").hide(100); //Menüyü gizle
    }
});

$(".custom-menu li").click(function () { //Özel menü li nesnesine tıklandığında
    switch ($(this).attr("data-action")) { //Data action
        case "first": alert("0 242 243 1393"); break; //1 ise
        case "second": alert("info@evusmimarlik.com.tr"); break;//2 ise
        case "third": alert("© 2016, Evus Mimarlık. Tüm hakları saklıdır."); break;//3 ise
    }
    $(".custom-menu").hide(100); //İşlem bitiminde menüyü gizle
});

Daha farklı scriptler kullanarak içeriği daha da zenginleştirebilirsiniz.