ondblclick löst auch die onclick Funktionen aus

[Gunnar Bittersmann]

@@AndyNail

echo "<div style='float:left; width:40px; height:40px; margin-right:5px'><a name='SubButton' id='SubButton$ID' onclick='this.blur()' href=\"javascript: ShowSubLinks($ID)\" style='padding:5px'><div style='background-image:url(Pictures/SubUp.png); width:30px; height:30px; '></div></a></div>";

Es ist i.a.R. keine gute Idee, Markup mit PHP echo auszugeben. Besser die Daten mit PHP ins Markup schreiben:

<div style='float:left; width:40px; height:40px; margin-right:5px'>
  <a name='SubButton' id='SubButton<?= $ID ?>' onclick='this.blur()' href="javascript: ShowSubLinks(<?= $ID ?>)" style='padding:5px'>
    <div style='background-image:url(Pictures/SubUp.png); width:30px; height:30px;'></div>
  </a>
</div>

Style-Angaben gehören nichts ins Markup (style-Attribute), sondern ins Stylesheet.

Was soll das onclick='this.blur() bewirken? Den Focus vom gerade angeclickten Element wegzunehmen ist wohl keine so gute Idee.

a-Elemente dienen zur Verlinkung auf andere Ressourcen (bzw. Sprungmarken). Zur Ausführung von Aktionen auf einer Seite ist – wie schon gesagt – button zu verwenden. (Buttons können so gestylet werden, dass sie keinen Rahmen und keine Hintergrundfarbe haben und genauso wie Links aussehen.)

Bei dir gibt es keinerlei Inhalt; selbst das innere div ist leer. Das Icon SubUp.png ist keine Verzierung, sondern Inhalt; das gehört demzufolge in ein img-Element (bzw. svg) – mit Alternativtext, der erscheint, wenn das Bild nicht geladen werden kann, bzw. der Nutzern von Screenreadern vorgelesen wird.

Das Markup sähe also so aus:

<button onclick="ShowSubLinks(<?= $ID ?>);">
  <img src="Pictures/SubUp.png" alt="Untermenü anzeigen"/>
</button>

Die Darstellungsangaben dazu wie gesagt im Stylesheet.

Noch schicker wäre freilich, auch den JavaScript-Code nicht ins Markup (onclick-Attribut) zu schreiben, sondern Event-Handler per JavaScript zu definieren.

---

function ShowThisSubLinks(ID)
{
	if (document.getElementById('SubList'+ID).style.display == "none")
	{
	document.getElementById('SubList'+ID).style.display = ""	
	document.getElementById('SubButton'+ID).getElementsByTagName('IMG')[0].src = "Pictures/SubUp.png"
	document.getElementById('SubButton'+ID).setAttribute("View", "2")
	}
}
function HideThisSubLinks(ID)
{
	if (document.getElementById('SubList'+ID).style.display != "none")
	{
	document.getElementById('SubList'+ID).style.display = "none"
	document.getElementById('SubButton'+ID).getElementsByTagName('IMG')[0].src = "Pictures/SubDown.png"
	document.getElementById('SubButton'+ID).setAttribute("View", "1")
	}
}

Es ist unperformant, immer wieder dasselbe Element aus dem DOM rauszusuchen. Das solltest du einmal tun und die Referenz auf das Objekt in einer Variablen speichern:

function ShowThisSubLinks(ID)
{
	var thisSubLinks = document.getElementById('SubList'+ID);

	if (thisSubLinks.style.display == "none")
	{
		thisSubLinks.style.display = ""	
		thisSubLinks.getElementsByTagName('IMG')[0].src = "Pictures/SubUp.png"
		thisSubLinks.setAttribute("View", "2")
	}
}

function HideThisSubLinks(ID)
{
	var thisSubLinks = document.getElementById('SubList'+ID);

	if (thisSubLinks.style.display != "none")
	{
		thisSubLinks.style.display = "none"
		thisSubLinks.getElementsByTagName('IMG')[0].src = "Pictures/SubDown.png"
		thisSubLinks.setAttribute("View", "1")
	}
}

Der Alternativtext fürs Icon wäre ebenfalls noch zu tauschen – wenn nicht einer wie „Untermenü anzeigen/verbergen“ verwendet wird.

Da beide Funktionen ziemlich ähnlich sind, wäre zu überlegen, ob es nicht sinnvoller ist, sie in einer Funktion ToggleThisSubLinks(ID) zusammenzufassen.

LLAP 🖖