Problem with Context Menu

Asked

Viewed 90 times

2

Well I am mounting this Menu context within a table, it is working perfectly, by right clicking it opens. But whoever clicks the link closes without redirecting to page, someone knows what the problem is.

// Abre menu
var aberto = false;
$(document).ready(function () {

    // Abre o menu
    $("body").mousedown(function (e) {

        e = e || window.event;
        var element = e.target || e.srcElement;

        var parentNode = element.parentNode;
        while (aberto) {
            if (parentNode.tagName === "TR")
            {
                break;
            } else if (parentNode.tagName === "HTML" || parentNode.tagName === "BODY") {
                closeMenu();
                break;
            } else {
                parentNode = parentNode.parentNode;
            }
        }


    });
    $("tr").mousedown(function (e) {

        // Devolve o background da tabela
        $("table.tab_dados tr").removeClass('bg-yellow-2 text-white');

        // Verifica qual botão clicou com botão direito, ou se deu clique longo
        if (((e.button === 2) || (isMobile() !== null)) && (aberto === false)) {

            aberto = true;

            // Veriaveis de cálculo
            var pX = e.pageX;
            var pY = e.pageY;

            // Calculos da posição
            // Dentro das Tabs-Abas
            if ($(".tabs-container").length) {
                pX = pX + 10;
                pY = pY - 40;

                // Dentro do Container
                if ($(".container-body").length) {
                    pX = pX - 10;
                    pY = pY + 40;
                }
            }

            // Verifica a posição Mobile
            if (isMobile() !== null) {
                pX = 100;
            }

            // Define a posição do menu            
            $('#menu' + this.id + '').css({
                left: (pX + "px"),
                top: (pY + "px")
            }).toggle('fast');

            // Adiciona CSS na linha selecionada
            $("#" + this.id).addClass('bg-yellow-2 text-white');
        } else {
            closeMenu();
        }
    });

    function closeMenu() {
        aberto = false;

        // Fecha menu
        $(".context_menu_pai").toggle(aberto, 'fast');

        // Devolve o background da tabela
        $("table.tab_dados tr").removeClass('bg-yellow-2 text-white');
    }

});

function isMobile() {

    // Verifica o browser
    var isMobile = {
        Android: function () {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function () {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function () {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

    return isMobile.any();
}
/*====================================================================================================================*/
/* Context_Menu */
/*====================================================================================================================*/
.context_menu_pai {
    display: none;
    position: absolute;
    width: 200px;
    background: #FFFFFF;
    z-index: 98;
}
.context_menu { 
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #FFFFFF;
}
.context_menu:hover, .sidenav_menu:hover { 
    background: #EEEEEE; 
    border-left: 7px solid #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body oncontextmenu='return false'>
<table class="tab_dados">
            <tr>
                <th>id</th>
                <th>CÓDIGO</th>
                <th>NOME</th>
                <th>CIDADE</th>
                <th>ESTADO</th>
            </tr>

            <tr id='1'>
                <td>4</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
            <tr id='2'>
                <td>3</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
        </table>

        <!-- Contex Menu -->
        <div class='context_menu_pai' id='menu1'>
            <div class='context_menu' onclick='document.location = "http://www.google.com"'>Editar</div>
            <div class='context_menu' onclick='document.location = "http://www.google.com"'>Deletar</div>
        </div>
        <div class='context_menu_pai' id='menu2'>
            <div class='context_menu' onclick='document.location = "http://www.google.com"'>Editar</div>
            <div class='context_menu' onclick='document.location = "http://www.google.com"'>Deletar</div>
        </div>

javascript jquery css

1 answer

1

You can try this way: onclick='javascript:location.href="http://www.google.com"'

But since you are using Jquery, you can do the following:

<div class='context_menu_pai' id='menu1'>
        <div class='context_menu' data-loc='http://www.google.com'>Editar</div>
        <div class='context_menu' data-loc='http://www.google.com'>Deletar</div>
</div>

$(".context_menu").click(function()
{
    document.location.href = $(this).dataset.loc;
});

  • I thought your idea was very good, but I couldn’t make it work, I’ll send you the link so you can see ok. I think I’m doing something wrong. https://jsfiddle.net/hugoborges/ny4poL6r/

  • Change the line $(this).dataset.loc for $(this).data('loc'); . The first example would be for a pure js code.

  • Still not working, this code is https://jsfiddle.net/hugoborges/ny4poL6r/1/

  • @Hugoborges , I put a console.log($(this).data('loc')); and is printing on the console the Google link. However I believe that it will not work on jsfiddle because it is a redirect. Try your local environment to see if the problem will persist.

  • tin, here in mine not appearing nor the log. I tried in my local environment and https://jsfiddle.net/hugoborges/ny4poL6r/2/

  • Comments on the closeMenu() that’s inside the else if (parentNode.tagName === "HTML" || parentNode.tagName === "BODY") {

  • this way it works, the problem is it generates a new bug, the menu does not close when I click out of the table. There is some solution for this?

  • good solved the problem like this: https://jsfiddle.net/hugoborges/ny4poL6r/3/

Show 3 more comments

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.