Problem with context Menu

Question

Problem with context Menu

Navigation

#1 by (1 votes)

2

I'm putting this context menu inside a table, it is working perfectly, right-clicking it opens. But who clicks the link it closes without redirecting to page, does anyone know 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><bodyoncontextmenu='returnfalse'><tableclass="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

asked by anonymous 20.03.2017 / 19:36

1 answer

When to Use Encryption When Developing for Mobile Devices? Rename a variable using Parameters of a Function // Javascript [closed]

score 1 · Answer 1

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

But since you're 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;
});