JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<nav>
    <ul>
        <li contextmenu='rmenu' title='sID=1' class='h_menu' name='1'>Home
            <ul>
                <li contextmenu='rmenu' title='sID=3' class='h_menu' name='3'>Test 1</li>
                <li contextmenu='rmenu' title='sID=4' class='h_menu' name='4'>test 2</li>
            </ul>
        </li>
        <li contextmenu='rmenu' title='sID=2' class='h_menu' name='2'>404</li>
        <!-- unwichtig: -->
        <menu type="context" id="rmenu">
            <menuitem label="Seite bearbeiten" class="s_class" id="s_edit"></menuitem>
            <menuitem label="Seite l&ouml;schen" class="s_class" id="s_del"></menuitem>
        </menu>
    </ul>
</nav>
<div id="sid">Hier die sID</div>

CSS

#sid{margin-top:80px;}

JavaScript

var sID = 0;
var cID = 0;
function seite(element){
    sID = $(element).attr('name');
    // mit z.B. diesem alert geht es: ohne nicht..
    alert("sag hallo");
    document.getElementById("sid").innerHTML= sID;
}
function _utime(){
    var d = new Date();
    return Math.round(d.getTime());
}

var limit = 250;//0,5 sec.
var zeitgrenze,onholdtoolong;

function chk(elem){
    zeitgrenze = _utime()+limit;
    onholdtoolong = setTimeout(
        function(){
            if(onholdtoolong){
                //showMenu(elem);
                alert("lang gedrĂĽckt");
            }
        return; /*und wieder raus hier!*/
        },limit
    );
    elem.onmouseup = function(){
        onholdtoolong = false; /*schnell wieder weg damit, denn user hat losgelassen :D*/
        if(_utime() >= zeitgrenze){
            return; /*und wieder raus hier!*/
        }
        /*sonst das hier*/
        //alert('kurz gedrueckt')
        seite(elem);
    }
}

$(".h_menu").mousedown(function(event) {
    if (event.which == 1) {
        chk(this);

    };
   // return false;
})