DIV Focus - Bing Map

[donstreiff]

Hallo Zusammen

Ich habe ein Problem mit der Bing Map und dachte das es vlt eine CSS Lösung gibt.

Seite: http://worklink.ch/c-de/Kontakt2/index.php

Problem: Bei 2 Markern gibt es eine Infobox wo es einen Scrollbalken gibt, das Problem ist das ich denn nicht verschieben kann, da es meint es müsste die Map verschieben, das gleiche z.B. wenn ich den Text in der Infobox markieren möchte, es verschiebt sich die Map staht etwas zu markieren. Nun dachte ich mir es gibt vlt einen Befehl oder so wo ich der Focus nur auf dem DIV ist und alles andere sozusagen ausblendet.

Gibt es sowas? Oder habt ihr eine andere Idee für das Problem?

Danke für eure Antworten!

 

[kkapsner]

Du musst in dem DIV das Event-Bubbling verhindern. Das tust du, indem du zu den gewünschten Eventtype einen Listener registrierst und dann dor event.stopPropagation() bzw. event.cancelBubble = true; ausführst.

 

[donstreiff]

Danke für deine Antwort. Ich habe nun beim div mit dem scrollbalken die 2 Möglichkeiten ausprobiert:

onscroll="event.cancelBubble = true;" 

$('#infoRight').scroll(function(event){
    event.stopPropagation();
});

Beide haben nicht funktioniert auch mit onclick nicht.

 

[kkapsner]

Das entscheidende Event ist onmousemove...

 

[donstreiff]

Danke für die Hilfe, es hat für das scrollen funktioniert Muss ich fürs Textmarkieren noch einen anderen Event nehmen?

 

[miniA4kuser]

Denke mal du suchst das hier: http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page

 

[donstreiff]

Dort wird gezeigt wie man es macht das es nicht markierbar wird, was mir nicht sehr viel weiter hilft. Ich habe trotzdem mal noch mit dem CSS probiert:

-moz-user-select: text;

Das ist ja eigentlich auch Standard und hat auch nicht funktioniert. Ich denke es hat wieder was damit zu tun das es die Events von der map nimmt, wenn ich nämlich markieren will, verschiebt sich die Map.

 

[kkapsner]

Das sollte dann mit dem mousedown-Event funktionieren.

PS: dir ist schon klar, dass das so nicht im IE funktioniert...

 

[donstreiff]

Danke kkapsner, hat funktioniert!

Das IE Problem habe ich gesehen...ist es denn überhaupt möglich, dass es mit der Bing Map und dem Layout im IE funktioniert?

 

[kkapsner]

Schau' mal in #2 das "bzw." an.

 

[donstreiff]

Bei mir funktioniert die 2 Möglichkeit nicht

<div id="infobox">...Inhalt...</div>

<script type="text/javascript">

	$('#infobox').mousemove(function(event){
		event.stopPropagation();
	});
	$('#infobox').mousedown(function(event){
		event.stopPropagation();
	});

</script>

und Jquery ist auch eingebunden, mach ich was falsch?

 

[ein schlauer]

Hier fehlt ein return false beim mousedown Event.

 

[donstreiff]

also so?:

$('#infobox').mousedown(function(event){
	event.stopPropagation();
	return false;
});

falls du es so meinst, hat es keinen unterschied gemacht...

 

[ein schlauer]

Sollte aber.

NAchtrag: Mach das mal auch mal bei der anderen Funktion

 

[kkapsner]

return false bewirkt bei Event-Listenern, die über .addEventListener bzw. attachEvent registriert wurde überhaupt gar nichts. Außerdem sollte das .stopPropagation() das ja bewirken.

PS: Hab' mich vorher verlesen - es sollte eigentlich schon im IE funktionieren... tut's auch in meinem. Welchen verwendest du denn?

 

[donstreiff]

Ja im IE 9 funktioniert es bei mir auch, leider IE 8 / 7 nicht... es wäre super wenn es dort auch funktionieren würde, falls du noch eine Lösung kennst... bin aber schon froh das es bei allen anderen geht

Danke schon mal für die Hilfe!

 

[kkapsner]

Moment... auf der Seite verwendest du einen anderen Code als du hier geschrieben hast. Hier hast du jQuery verwendet und auf der Seite verwendest du einen inline-Eventlistener mit nativem JS.

Mit nativem JS ist die Aussage in #8 richtig und du musst im IE mit .cancelBubble arbeiten. Das hättest du aber auch aus der Fehlerkonsole herauslesen können.

 

[ein schlauer]

return false bewirkt bei Event-Listenern, die über .addEventListener bzw. attachEvent registriert wurde überhaupt gar nichts.

Da habe ich andere Erfahrungen gemacht.

 

[kkapsner]

OK - ich hab' noch mal überprüft:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
window.onload = function(){
	document.getElementsByTagName("a")[0].addEventListener("click", function(){return false;}, false);
};
</script>
</head>
<body>
<a href="//google.de">test</a>
</body>
</html>

im FF wird die Defaultaktion ausgeführt - wenn man addEventListener durch attachEvent austauscht und in den IE geht, wird sie unterdrückt. Wir hatten also beide Recht.

 

[donstreiff]

Entschuldige das ich erst jetzt wieder schreibe, ich habe mir jetzt nochmals das ganze angesehen:

Wenn ich es per jQuery löse funktioniert es nun in keinem Browser mehr:

$('#infobox').mousemove(function(event){
	event.stopPropagation();
});
$('#infobox').mousedown(function(event){
	event.stopPropagation();
});

Wenn ich es so löse funktioniert es überall ausser IE7:

onmousedown="event.stopPropagation();" onmousemove="event.stopPropagation();"

Wenn ich dazu jetzt noch cancelBubble nehme ändert sich nichts:

onmousedown="event.stopPropagation();event.cancelBubble();" onmousemove="event.stopPropagation();event.cancelBubble();"

Auch wenn ich cancelBubble noch ins jQuery nehme passiert nichts.

Kannst du mir nochmals genau sagen welche Art bis IE7 funktioniern sollte? Also welchen Event und ob mit oder ohne jQuery?

Danke nochmals