[JS] Mousedown en onclick conflict

[sorted.bits]

Ik ben op dit moment bezig met een web applicatie welke een aantal regels kan showen, met daarvoor een checkbox. Nu wil ik daar functionaliteit ini bouwen zoals in Explorer etc, dat wanneer je eerst 1 checkbox aanklikt en daarna een andere met shift+click, dat alle checkboxes daartussen geselecteerd worden.

Hiervoor heb ik dus 2 dingen nodig, een mousedown event welke controleert of de shift toets is ingedrukt en een functie welke ook nog wat zooi uithaalt. Nu dacht ik (logischerwijs) dat EERST een mousedown event werd uitgevoerd en daarna een onclick event, maar dit lijkt niet zo te zijn. In Firefox wordt eerst de onclck uitgevoerd en daarna de mousedown. En in IE wordt het nog leuker, die voert alleen maar de mousedown uit.

Ik heb de volgende code :

PHP:

<SCRIPT>
            var shiftPressed = false;
            var lastSelected = false;
            
            function mouseDown(e)
            {
                alert('mousedown');
                if(typeof(e)=='undefined')
                    e=window.event||window.Event;
                    
                if (e.shiftKey)
                {
                    shiftPressed = true;
                    alert('shift pressed!');
                }   
                else
                {
                    shiftPressed = false;
                }
                return true;    
            }
        
            function toggle_class(id, unread)
            {
                alert('toggle_check');
                box = document.getElementById('message[' + id + ']');
                var row = document.getElementById('row[' + id + ']');
                if (box.checked == true)
                {
                    row.className = 'email-row-selected';
                }
                else
                {
                    if (unread == 1)
                        row.className = 'email-unread';
                    else
                        row.className = 'email-read';
                }
            }
            
            if(window.Event)
                document.captureEvents(Event.MOUSEDOWN);
                
            document.onmousedown = mouseDown;
</SCRIPT>

<INPUT ID='message[1]' NAME='message[1]' TYPE='CHECKBOX' VALUE='1' onclick='toggle_class(1, 0)'>

_{de row variable in toggle_class krijgt een table row ge-assigned}

Wat dus mijn idee was is : ik zet in de mousedown functie een variable (bijv shiftPressed) welke ik in andere functies kan gebruiken. Hierdoor zou ik dus kunnen weten in de toggle_class functie of de shift key ingedrukt is.

De detectie van de shift key gaat allemaal goed, maar alleen daarna loopt alles scheef. Weet iemand of dit op te lossen is ?

Disclaimer: Deze code is zoveel mogelijk uit mijn huidige code gehaald, dit zal hoogst waarschijnlijk op zichzelf staand niet werken.

[ Voor 24% gewijzigd door sorted.bits op 14-10-2005 07:59 ]

[sorted.bits]

Mmmm, nadat ik de openings post voor de 12e keer ge-edit had, zag ik het licht en de post hierboven moet volgens mij nu werken.

[NMe]

Lezen is moeilijk.
HTML, CSS, JavaScript, Flash en Director topics *12-05*

Javascript hoort dus in Webdesign & Graphics, dus voor de volledigheid:
PW>>WG

[frickY]

Gebruik als onclick in je checkbox;[code] onclick="cbClick(event)'"/code]

Aan de hand van de event kun je in je code alles wat je nodig hebt uitlezen; het geklikte object, en de status van de shift-toets.

JavaScript:

<script type="text/javascript">
var cbFirst;
var cbLast;
function cbClick(e){
    var obj = e.srcElement ? e.srcElement : e.target;
    if (obj.type == 'checkbox') {
        if (e.shiftKey == 1) {
            cbLast = obj;
            if (cbFirst != null) {
              cbSelect();
            }
        } else {
          cbFirst = obj;
    }
  }
}
function cbSelect() {
    var inrange = false;
    var objs = document.forms[0];
    for (i = 0; i < objs.length; i++) {
      var obj = objs.elements[i];
        if (obj.type == 'checkbox') {
            if ((obj == cbFirst || obj == cbLast) && inrange == true)
                return;
        if (inrange == true)
                obj.checked = !obj.checked;
            if ((obj == cbFirst || obj == cbLast) && inrange == false)
                inrange = true;
        }
    }
}
</script>

Bovenstaand zou een compleet werkend voorbeeld moeten zijn. In de cbClick() wordt bijgehouden of, indien de shift toets in ingedrukt, je voor de eerste of tweede keer een checkbox aanklikt, waardoor aan de hand van de cbFirst en cbLast vars de cbSelect() functie weet welke reeks geselecteerd moeten worden.

Truuk is dus om de shiftkey gewoon in je functie zelf af te vangen, in plaats van dit in een externe functie te doen.

[ Voor 18% gewijzigd door frickY op 14-10-2005 09:41 ]