onmousedown ruft alle elemente auf / Function geht nur wenn drinnen ein alert() vorkommt.

wolf · 12. März 2014

Hallo,
folgendes Problem:
Wenn ich in der function irgend ein Alert ausgebe, wird bei untergeordneten li Elementen die sID richtig übertragen, ansonsten wird immer die sID des übergeordneten li Elements übertragen.

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>

Alles anzeigen

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");
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var string = xmlhttp.responseText;
            document.getElementById("ajax_in").innerHTML = string;
        }
        else{
            document.getElementById("ajax_in").innerHTML="Es konnte keine Verbindung aufgebaut werden.";
        }
    }
    xmlhttp.open("GET","seite.php?sID="+sID,true);
    xmlhttp.send();
}

Alles anzeigen

element ist ein this was bei klick auf ein Element im Menü abgefangen wird.
Ich verstehe nicht, wieso das Fehler macht.

Edit:

hier sieht man was passiert: JSFiddle

Wie kann ich das verhindern?

lauras · 12. März 2014

Klar - wenn du auf geschachtelte Elemente klickst werden immer alle (mit dem innersten beginnend) onclicks abgefeuert - der äußere überschreibt dann den inneren, deshalb bekommst du die Zahl vom äußeren (lass dir die Zahlen mal auf der Konsole ausgeben, da kommen dann beide hintereinander).
Wenn du das verhindern willst musst du das ganze nach dem ersten Klick mit einem return abbrechen. Der alert hat bei dir diese Funktion quasi übernommen, deshalb hat es damit funktioniert.

JavaScript

var sID = 0;
var cID = 0;
function seite(element){
    sID = $(element).attr('name');
    document.getElementById("sid").innerHTML= sID;
}
$(".h_menu").click(function(event) {
    seite(this); 
    return false;
})

so sollte es gehen
Nebenbei, wenn du schon jQuery verwendest kannst du dann auch den ajax-Zugriff mit jQuery machen

wolf · 12. März 2014

Danke, hätte ich schon fast selbst drauf kommen können es abzubrechen.
Das alle abgefeuert werden, is ja klar, hab ich spätestens gemerkt als ich es in JSFiddle hab laufen lassen.

Edit: ja, reintheoretisch funktioniert es allerdings nicht hiermit:

JavaScript

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

wolf · 12. März 2014

Hier nochmal die Vollversion ..: JSFiddle

onmousedown ruft alle elemente auf / Function geht nur wenn drinnen ein alert() vorkommt.

Jetzt mitmachen!

Teilen