2

Bom estou montando este context Menu dentro de uma tabela, ele esta funcionando perfeitamente, ao clicar com botão direito ele se abre. Porém quem clica no link ele fecha sem redirecionar para página, alguém sabe qual é o problema.

// 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>
       

1 Resposta 1

1

Você pode tentar da seguinte maneira: onclick='javascript:location.href="http://www.google.com"'


Mas como você está usando JQuery, pode fazer o seguinte:

<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;
});
8
  • Achei sua ideia muito boa, porém não consegui fazer funcionar, vou te mandar o link para vc poder ver ok. Acho que estou fazendo algo errado. jsfiddle.net/hugoborges/ny4poL6r Commented 29/03/2017 às 0:14
  • Troque a linha $(this).dataset.loc por $(this).data('loc'); . O primeiro exemplo seria para um código em js puro.
    – wmarquardt
    Commented 29/03/2017 às 0:43
  • Continua sem funcionar, olha como esta o código jsfiddle.net/hugoborges/ny4poL6r/1 Commented 29/03/2017 às 0:59
  • @HugoBorges , coloquei um console.log($(this).data('loc')); e está printando no console o link do Google. Porém acredito que não vai funcionar no jsfiddle por se tratar de um redirect. Tente em seu ambiente local para ver se o problema irá persistir.
    – wmarquardt
    Commented 29/03/2017 às 1:03
  • estanho, aqui no meu não esta aparecendo nem o log. Tentei no meu ambiente local e no jsfiddle.net/hugoborges/ny4poL6r/2 Commented 29/03/2017 às 1:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .