[JS] Mouse position bepalen in Mozilla/Firefox - Softwareontwikkeling

zaterdag 18 december 2004 00:50

Acties:

Topicstarter

Beste mensen,

Ik ben met een scriptje bezig dat een simpele tooltip moet vertonen. Opzich niet zo'n probleem, enkel krijg ik het niet voor elkaar de mouse position in Mozilla correct te krijgen:

Voorbeeldje van de X position:

code:

var IE = document.all?true:false;

var tempX = 0;

function get_x(){
    if(IE){
        tempX = event.clientX + document.body.scrollLeft;
    }
    else{
        tempX = event.clientX; // Volgens mij kapt íe er hier mee
    }  
    if(tempX < 0){
        tempX = 0;
    }   
    return tempX;
}

Dit retun't in IE keurig de X positie, maar in Mozill/Firefox niet. Na een zoekactie kwam ik erachter dat een simpele "e" variabele al voldoet voor "event", en sommige scripts gebruik maken van "pageX" in plaats van "clientX", maar niets van dit werkt...

iemand enig idee?

zaterdag 18 december 2004 00:54

Acties:

André

Analytics dude

code:

var IE = document.all?true:false;

var tempX = 0;

function get_x(evt){
    
    
    if(IE){
        tempX = evt.clientX + document.body.scrollLeft;
    }
    else{
        tempX = evt.clientX; // Volgens mij kapt íe er hier mee
    }  
    if(tempX < 0){
        tempX = 0;
    }    
    alert(tempX);
}

<body onclick="get_x(event)">

Zo dan

zaterdag 18 december 2004 02:17

Acties:

Verwijderd

ik heb deze..

code:

document.onmousemove = MoveHandlerIex;

function MoveHandlerIex(event)
{
    mx = (ie)?(window.event.x + document.body.scrollLeft):event.pageX;
    my = (ie)?(window.event.y + document.body.scrollTop):event.pageY;
    return true;
}

zaterdag 18 december 2004 11:40

Acties:

crisp

Devver

Pixelated

Gisteren nog geplaatst in [rml][ js] onclick-elders -> sluit div[/rml]

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

JavaScript:

function doSomething(e)
{
    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;
    }
}

browser-sniffing is evil

[ Voor 3% gewijzigd door crisp op 18-12-2004 11:40 ]

Intentionally left blank

zaterdag 18 december 2004 14:13

Acties:

Foutlook

zie inderdaad ook mijn topic. Dit werkt echter niet in Firefox bij mij als je meerdere variabelen probeert me te sturen. Firefox geeft dan de foutmelding :"e has no properties".
Ligt dit nu aan mij of heeft iedereen dit?

code goed:

code:

1	<a href="#" onclick="doSomething(event);">hallo</a>

code fout:

code:

1	<a href="#" onclick="doSomething(event, 'hoi');">hallo</a>

Kan je gewoon dan niet meer variabelen meesturen?

[ Voor 54% gewijzigd door Foutlook op 18-12-2004 14:17 ]

zaterdag 18 december 2004 14:18

Acties:

André

Analytics dude

Foutlook schreef op zaterdag 18 december 2004 @ 14:13:
zie inderdaad ook mijn topic. Dit werkt echter niet in Firefox bij mij. ("e has no properties").
Ligt dit nu aan mij of heeft iedereen dit?

Dat ligt aan jou, jij geeft in de onclick (of ander event) geen event mee

Zie mijn eerdere voorbeeld (in de body tag).

[ Voor 5% gewijzigd door André op 18-12-2004 14:18 ]

zaterdag 18 december 2004 14:20

Acties:

Foutlook

[quote]André schreef op zaterdag 18 december 2004 @ 14:18:
[...]

hier stond wat doms. het lag niet aan het meesturen van meerdere variabelen. laat maar

[ Voor 50% gewijzigd door Foutlook op 18-12-2004 14:35 ]

zaterdag 18 december 2004 18:09

Acties:

crisp

Devver

Pixelated

In non-IE browsers wordt het event als laatste argument meegegeven

Intentionally left blank

zondag 19 december 2004 00:09

Acties:

Mexxus

Topicstarter

Tot zover heb ik de volgende code, die nog steeds alleen in IE werkt:

code:

var posx = 0;
var posy = 0;

function get_x(e){
    var posx = 0;
    if(!e){
        var e = window.event;
    }
    if(e.pageX){
        posx = e.pageX;
    }
    else if(e.clientX){
        posx = e.clientX + document.body.scrollLeft;
    }
    return posx;
}

function get_y(e){
    var posy = 0;
    if(!e){
        var e = window.event;
    }
    if(e.pageY){
        posy = e.pageY;
    }
    else if(e.clientY){
        posy = e.clientY + document.body.scrollTop;
    }
    return posy;
}

function css(ID){

    if(document.getElementById)
        return document.getElementById(ID).style;
    else if(document.all)
        return document.all[ID].style; 
    else if(document.layers) 
        return document.layers[ID]; 
}

function show_tooltip(ID){
    css(ID).left = get_x();
    css(ID).top = get_y();
    css(ID).display = 'block';
}

function hide_tooltip(ID){
    css(ID).display = 'none';
}

In de HTML staat een standaard divje:

code:

1	<div id='tooltip'>WHOEI!!!!</div>

De tooltip roep ik dan op via:

code:

1	OnMouseOver="javascript:show_tooltip('tooltip')" OnMouseOut="javascript:hide_tooltip('tooltip')"

zondag 19 december 2004 00:26

Acties:

crisp

Devver

Pixelated

JavaScript:

+ 'px';

wellicht?

En waarom toch die d.layers en d.all afvragingen? Je pagina zal het 10 tegen 1 toch niet doen in NS4 of IE4 dus why bother?

javascript: in eventhandlers is ook not-done, en please gebruik geen caps in attribuut-namen, dat is allemaal zo 90's...

[ Voor 91% gewijzigd door crisp op 19-12-2004 00:28 ]

Intentionally left blank