[js] onclick-elders -> sluit div

[Foutlook]

Ik ben bezig met een custom context (rechtermuisknop) menu, die ik wil laten sluiten als ik ergens in de pagina (behalve in het menu zelf) klik.

Het tonen van het menu gaat perfect, maar het gedeelte voor het sluiten als er ergens anders geklikt wordt werkt alleen in IE, niet in Firefox

Ik heb dit topic ook al gezien, maar ik wil het dus echt met een klik laten verdwijnen, en niet na x aantal seconden of focusout.

mijn code:

code:

function menuclick(e)
    {
        source = event.srcElement;
        
        if (source.tagName == "A")
        {
            return true;
        }
        if (source.tagName == "HTML")
        {
            return;
        }
        while( source.tagName != "HTML" && source.tagName != "DIV")
        {
            source=source.parentElement;
        }
        eventHandler(source);
        return true;
    }


    function eventHandler(obj)
    {
        if (obj.tagName=="DIV")
        {
                if (obj.id == "forumlink")
                {
                    return true;
                }
        }
        document.getElementById("forumlink").style.display = 'none';
    }


    function setup() {
            document.onclick=menuclick
    }

    document.onload = setup();

Iemand die een idee heeft, om bovenstaande werkend te krijgen voor Firefox?

[faabman]

waarom geef je je contextmenu geen ID mee en check je daarop... lees anders onderstaande link en de bijbehorende pagina's even door en dan vooral het stuk over event orders

http://www.quirksmode.org/js/introevents.html

[ Voor 7% gewijzigd door faabman op 17-12-2004 14:01 ]

[Foutlook]

Ik geef het contextmenu al een ID mee (zoals je kan zien in de JS code). Die gebruik ik namelijk om de display op none te gooien als er ergens anders geklikt wordt.

Maar je bedoelt dat ik dat ID ook kan gebruiken om af te vangen waarop geklikt wordt? Hoe zou ik dat kunnen doen?

[faabman]

waar het eigenlijk op neer komt is dat je bij de onclick van het contextmenu het onclick event volledig moet cancellen (zodat dit niet gepropageerd word naar de parentNode want met de onclick van de parentNode laat je het contextmenu verdwijnen)

een eenvoudige functie hiervoor is (afkomstig van quirksmode)

JavaScript:

document.getElementById('idvanjemenu').onclick = function(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

[Foutlook]

faabman schreef op vrijdag 17 december 2004 @ 14:24:
waar het eigenlijk op neer komt is dat je bij de onclick van het contextmenu het onclick event volledig moet cancellen (zodat dit niet gepropageerd word naar de parentNode want met de onclick van de parentNode laat je het contextmenu verdwijnen)

een eenvoudige functie hiervoor is (afkomstig van quirksmode)

JavaScript:

document.getElementById('idvanjemenu').onclick = function(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Sorry, maar ik begrijp je niet helemaal. Wanneer en waarom moet ik volgens jou het onclick event volledig cancellen?

Ik cancel het onclick event namelijk al helemaal wanneer ik het context menu laat verschijnen (met een soortgelijke code als jij post), maar dat heb ik voor het gemak maar niet in de startpost vermeld omdat dat gedeelte goed werkt. Dit doe ik omdat anders, naast mijn contextmenu, het standaard context menu ook verschijnt.

Het gaat mij dus echt om het probleem van het sluiten van de div als er ergens anders geklikt wordt in Firefox.

[sjongenelen]

offtopic:
stick with IE then

[Foutlook]

TheNymf schreef op vrijdag 17 december 2004 @ 14:33:

offtopic:
stick with IE then

Als het lastig wordt, hoef ik toch niet meteen op te geven? Beetje rare opmerking, toch niet zo gek dat ik cross-browser wil bouwen?

[faabman]

HTML:

<div id=container>
  <div id=menu></div>
</div>

JavaScript:

var objContainer = document.getElementById('container');
var objMenu = document.getElementById('menu');

objContainer.oncontextmenu = function(){
  objMenu.style.display = 'block';
  
  return false;
}

objMenu.onclick = function(e){
    // I.E.
    if (!e) var e = window.event;
    e.cancelBubble = true; // i.e.
    if (e.stopPropagation) e.stopPropagation(); // mozilla
}

objContainer.onclick = function(){
  objMenu.style.display = 'none';
}

dit heeft te maken met de volgorde waarin events worden getriggerd http://www.quirksmode.org/js/events_order.html

[ Voor 10% gewijzigd door faabman op 17-12-2004 14:38 ]

[crisp]

Foutlook schreef op vrijdag 17 december 2004 @ 14:35:
[...]


Als het lastig wordt, hoef ik toch niet meteen op te geven? Beetje rare opmerking, toch niet zo gek dat ik cross-browser wil bouwen?

Nee, maar dan moet je wel bedenken dat het event-model in non-IE browsers anders is, en eerst eens gaan uitzoeken hoe dat dan anders is

[sjongenelen]

nah... ik weet iig niet of het mogelijk is.. mozilla wordt juist zoveel gebruikt omdat het back to basic is; geen rare plugin-pop-up-activeX-screen-dialer-install geouwehoer meer. misschien is het niet mogelijk om dat soort geintjes er op te gooien?

tenzij je het gezien hebt dan he

[faabman]

TheNymf schreef op vrijdag 17 december 2004 @ 14:37:
nah... ik weet iig niet of het mogelijk is.. mozilla wordt juist zoveel gebruikt omdat het back to basic is; geen rare plugin-pop-up-activeX-screen-dialer-install geouwehoer meer. misschien is het niet mogelijk om dat soort geintjes er op te gooien?

tenzij je het gezien hebt dan he

hoezo??? de meeste (zo niet alle) mogelijkheden die I.E. heeft zijn ook gewoon mogelijk met Mozilla hoor... Het gaat er gewoon om dat developers eens wat minder vaak moeten copy-pasten en eens wat vaker moeten proberen begrijpen waar ze mee bezig zijn

[Foutlook]

@faabman: bedankt! ik zal het eens gaan proberen, en die pagina goed doorlezen. Ik probeerde dit net ook al, maar tis nogal pittig allemaal als je het voor het eerst ziet..

@crisp: heb je idd gelijk in. bedankt aan faabman iig dat hij me daarmee op weg wilde helpen.

@TheNymf: je opmerkingen zijn nogal offtopic. Waarvoor ik het contextmenu ga gebruiken weet jij totaal niet. Je kan dus ook nooit oordelen over het nut hiervan. Daarnaast, als jij niet weet of het mogelijk is, wil nooit zeggen dat het niet mogelijk is. En om mijn prachtige menu te vergelijken met popups, screen dailers etc vind ik errug grof

[sjongenelen]

jah, eh, ik heb ze niet gezien

Modbreak:

ontopic please, of post niet als je niet weet waar het over gaat hier

[ Voor 57% gewijzigd door crisp op 17-12-2004 14:48 ]

[Foutlook]

Ehm, ik hoop niet dat dit een al te domme vraag is maar ik kom er niet uit..

Alles werkt perfect met de oplossing van faabman. Echter krijg ik nu de top en left properties van de div niet goed gezet zodat mijn contextmenu in Firefox altijd linksboven in het scherm geplakt blijft. IE doet het wel weer goed, en laat het contextmenu zien waar het hoort.

code:

code:

function showcontext(item, type, e) {

        var objContainer = document.getElementById('container');
        var objMenu = document.getElementById('forumlink');

        objContainer.oncontextmenu = function(){

            var eX = e.clientX-3;
            var eY = e.clientY-3;

            var w = document.getElementById(item).clientWidth || document.getElementById(item).offsetWidth;
            var h = document.getElementById(item).clientHeight || document.getElementById(item).offsetHeight;

            var curwidth = document.body.clientWidth || window.innerWidth;
            var curheight = document.body.clientHeight || window.innerHeight;

            if (eX + w + 4 > curwidth) eX -= (w - 4);
            if (eY + h + 4 > curheight) eY -= (h - 4);

            objMenu.style.left = eX + 'px';
            objMenu.style.top = eY + 'px';
            objMenu.style.display = 'block';

            return false;
        }

        objMenu.onclick = function(e){

                if (!e) var e = window.event;
                e.cancelBubble = true;
                if (e.stopPropagation) e.stopPropagation();
        }

        objContainer.onclick = function(){
            objMenu.style.display = 'none';
        }

    }

Eerst dacht ik dat hij de positie van de div 'container' binnenhaalde, maar volgens mij is dat niet zo. Als ik de div.container in het midden van de pag zet, wordt het contextmenu nog steeds linksboven geplaatst in Firefox.

Wat zie ik over het hoofd?

[faabman]

heb je het menu op position:absolute gezet??

overigens zijn de coördinaten van een click uit te lezen via

JavaScript:

// ie
  window.event.clientX
  window.event.clientY
// moz
  e.pageX
  e.pageY

[Foutlook]

Het menu staat inderdaad op 'position:absolute'.

Ik heb een browsercheck ingebouwd, en firefox gaat naar onderstaande code, maar dan nog wordt het menu linksboven getoond...

code:

var eX = e.pageX-3;
var eY = e.pageY-3;

[ Voor 52% gewijzigd door Foutlook op 17-12-2004 16:20 ]

[Verwijderd]

Foutlook schreef op vrijdag 17 december 2004 @ 16:13:
Het menu staat inderdaad op 'position:absolute'.

Ik heb een browsercheck ingebouwd, en firefox gaat naar onderstaande code, maar dan nog wordt het menu linksboven getoond...

code:

var eX = e.pageX-3;
var eY = e.pageY-3;

-3 wat? pixels misschien?

code:

var eX = e.pageX-3+"px";
var eY = e.pageY-3+"px";

[Foutlook]

Verwijderd schreef op vrijdag 17 december 2004 @ 18:15:
[...]

-3 wat? pixels misschien?

code:

var eX = e.pageX-3+"px";
var eY = e.pageY-3+"px";

Ja, 3 pixels trek ik van de waarde af. Maar die toevoeging pixels is niet nodig. Overigens heb ik het ook al zonder geprobeerd:

code:

var eX = e.pageX;

maar dat werkt dus ook niet. Als ik in een alert de waarden laat zien, zijn ze allebei nul.
Hoe krijg ik dus in Firefox (en andere non-IE browsers) de X en Y waarden waar ik op dat moment op klik??

[Verwijderd]

Foutlook schreef op vrijdag 17 december 2004 @ 18:20:

maar dat werkt dus ook niet. Als ik in een alert de waarden laat zien, zijn ze allebei nul.
Hoe krijg ik dus in Firefox (en andere non-IE browsers) de X en Y waarden waar ik op dat moment op klik??

http://www.quirksmode.org/js/findpos.html

Hier staat alles

[crisp]

deze pagina al bekeken (onderin)?

[Foutlook]

Ik heb inmiddels aardig wat pagina's doorgelezen over events, maar kom er toch niet uit. Volgens die pagina's zou dit moeten werken, maar in Firefox blijft ie weigeren ("e has no properties"). IE doet het wel goed.

js code:

code:

function showcontext(item, type, e) {

        var objContainer = document.getElementById('container');
        var objMenu = document.getElementById('forumlink');

        objContainer.oncontextmenu = function(){

            var posx = 0;
            var posy = 0;

            if (!e) var e = window.event;
            if (e.pageX || e.pageY)
            {
                posx = e.pageX;
                posy = e.pageY;
            }
            else if (e.clientX || e.clientY)
            {
                posx = e.clientX + document.body.scrollLeft;
                posy = e.clientY + document.body.scrollTop;
            }

            objMenu.style.left = posx + 'px';
            objMenu.style.top = posy + 'px';
            objMenu.style.display = 'block';

            return false;
        }

        objMenu.onclick = function(e){

                if (!e) var e = window.event;
                e.cancelBubble = true;
                if (e.stopPropagation) e.stopPropagation();
        }

        objContainer.onclick = function(){
            objMenu.style.display = 'none';
        }

    }

en de html:

code:

<div id="container" style="width:100%;">

        <br><br><br>
        <div id="hoofdmenu">
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        <a href="#" onmousedown="showcontext('forumlink', 3, event)">bladiebla</a><br>
        </div>


        <div id="forumlink" style="position: absolute; display:none; background: #fff; border: 1px solid #000;">
            <a href="">Bewerken</a>
            <a href="">Verwijderen</a>
            <a href="">Verplaatsen</a>
            <a href="">Kopieëren</a>
        </div>

    </div>

Kan iemand a.u.b. nog iets verder helpen? Ik snap er nix meer van..