[CSS/JS] Klick ignorieren - Hover ausführen?

[moshpanda]

Servus,

gibt es eine Möglichkeit per CSS/JS/jQuery einem Element zu sagen, dass nur darüber gehovert werden kann, der klick aber gänzlich ignoriert werden soll? Sprich das Element was darunter liegt wird halt geklickt?
pointer-events:none verbietet leider auch das Hover.

 

[Morpheus2200]

kannst du das etwas genauer beschreiben?

<img class="hoverme" src="/path/to/img"/>
<style>
.hoverme:hover {
...dein CSS
}
</style>

sollte normalerweise langen

 

[moshpanda]

Per Script wird ein Bild als Marker über eine Karte gelegt. Nun will ich halt aber nicht auf den Marker/das Bild klicken, sondern auf das ganze Land.

markers:[
  {latLng:[51.121450, 10.425818],name:"Deutschland"}
],
markerStyle: {
  initial: {
    image: 'marker.png'
  },
  hover: {
    image: 'marker-hover.png'
  }
}

Daraus generiert sich dann folgender Code:
<image data-index="0" fill="grey" stroke="#505050" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="5" class="jvectormap-marker jvectormap-element" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="marker.png" width="31" height="44" x="498.54941413520544" y="317.33761884809104"></image>


So ändert sich beim Hovern der Marker, allerdings kann ich auf den Marker klicken, was aber nicht gehen soll.
Wenn ich dann

.jvectormap-marker.jvectormap-element{pointer-events:none;}

nutze kann ich nicht draufklicken, beim Hover ändert sich aber auch nicht der Marker

 

[Morpheus2200]

hast du dazu ne URL ?

ansonsten legst du auf den marker als onclick die selbe aktion, die ausgelöst würde, wenn du auf das land klickst.

 

[moshpanda]

Leider nur lokal, Codepen etc geht nicht weil eine externe URL nur http ist...
Das wäre ne noch eine Möglichkeit, dann müsste ich nur schauen ob ich dem hier noch ein data-attribute anhängen kann:
{latLng:[51.121450, 10.425818],name:"Deutschland"}

also quasi

{latLng:[51.121450, 10.425818],name:"Deutschland", data-code: "DE"}

 

[Morpheus2200]

die marker sind doch sicherlich direkte Kinder der Karte, righty? und die Karte hat ein onclick-Argument.

da könntest du machen:

$('.jvectormap-marker').on("click", $('this').parent().attr("onclick") );

^ ohne Gewähr :P

 

[moshpanda]

Hm nicht direkt, also die Marker haben so gesehen keine Beziehung zu den einzelnen Regionen :/

<svg>
<!-- Region, generiert durch das Script -->
<g transform="scale(0.8097821534289358) translate(142.75201110260508, 0)">
<path d="M400.73,433.08l-0.52,-2.25l-0.56,-0.57l-4.28,-0.9l-0.52,-2.3l-0.72,-1.23l-1.11,-0.96l-1.47,0.14l-2.34,0.95l-0.92,-0.59l-2.1,-2.13l0.06,-1.42l-0.94,-2.11l5.63,-2.88l4.83,-1.89l0.35,1.28l1.0,1.0l0.79,0.0l1.32,-0.72l1.22,0.17l1.92,1.09l1.13,0.14l2.05,-0.73l1.86,-1.11l0.78,-1.23l1.7,0.4l0.63,-0.24l0.21,-0.45l-0.2,-0.84l1.02,-0.55l1.09,0.83l0.82,0.06l1.67,-1.16l0.71,1.31l0.55,0.19l1.3,-0.08l1.17,-1.0l0.54,1.83l1.68,1.4l1.62,0.43l2.18,-0.42l1.56,1.44l2.54,0.82l0.16,0.74l-0.9,1.69l-0.1,0.88l-1.21,1.21l-0.17,0.9l0.73,1.23l0.43,0.19l1.64,-0.55l0.67,0.81l1.43,0.18l1.66,1.17l1.24,1.25l-0.57,0.57l0.11,0.94l0.57,0.56l1.13,0.22l0.42,0.41l0.27,2.03l-2.32,1.34l-0.73,1.47l-2.05,-0.25l-1.48,1.5l-1.78,3.11l-0.26,2.02l2.04,2.91l-0.89,1.46l-3.56,0.48l-3.15,-2.93l-1.99,-0.73l-1.61,-1.01l-1.76,-0.23l-0.27,-1.86l-0.65,-0.86l0.89,-2.91l-0.19,-0.47l-0.91,-0.33l-0.73,0.31l-1.0,0.88l-0.65,1.57l-1.29,0.64l-2.28,0.26l-2.49,-0.26l-0.25,-0.23l0.75,-1.69l-0.73,-1.1l0.42,-1.16l-0.09,-0.82l-1.77,-1.33l-1.44,-0.33l-2.31,-0.2l-1.24,0.59Z" data-code="BE" fill="#fff" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"></path>
</g>
<g>
<!-- "händisch" generierter Marker -->
<image data-index="0" fill="grey" stroke="#505050" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="5" class="jvectormap-marker jvectormap-element" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="marker.png" width="31" height="44" x="498.54941413520544" y="317.33761884809104"></image>
</g>
</svg>

Ich müsste das data-code="XX" was in der Region generiert wird auch irgendwie mit an den Marker kriegen dann wäre das Problem gelöst. Nur stehen die halt zu keiner Beziehung zueinander

 

[scrollt]

Pointer-Events schalten alles ab wie dumschon bemerkt hast.

Am einfachsten ist es wohl im onClick handler des Markers einen Klick auf der passenden Karten-Kachel auszuführen. Müsstest du ja wissen welche das ist.

 

[moshpanda]

Konnte das Problem mittlerweile lösen, habe deinen Vorschlag aus meinem anderen Problem übernehmen können scrollt.

Könnte man das hier gegebenenfalls noch irgendwie schöner zusammenfassen?

$("#world-map path").click(function(){
  var countryCode = $(this).attr("data-code");
  var $info = $('.country-info[data-country="' + countryCode + '"]');
  var $fallback = $('.country-info.fallback');
  $(".country-info").fadeOut(300);
  if($info.get(0) !== undefined){
    $info.delay(400).fadeIn(300);
  }else{
    $fallback.delay(400).fadeIn(300);
  }
});

$(".jvectormap-marker.jvectormap-element").click(function(){
  var countryIndex = $(this).attr("data-index");
  var $index = $('.country-info[country-index="' + countryIndex + '"]');
  var $fallback = $('.country-info.fallback');
  $(".country-info").fadeOut(300);
  if($index.get(0) !== undefined){
    $index.delay(400).fadeIn(300);
  }else{
    $fallback.delay(400).fadeIn(300);
  }
});

Sind ja im Grunde identische Funktionen, nur dass andere Elemente angesprochen werden

 

[scrollt]

Schöner geht natürlich (fast) immer

Du solltest Dinge nur einmal machen, nicht mehrfach. Das gilt für jQuery aber Coding überhaupt. In deinem Beispiel macht es keinen Sinn $fallback immer wieder zu suchen. Das braucht man nur einmal machen. Der Aufruf der jQuery Funktion mit $(...) ist ja jedes mal eine ziemliche Arbeit. Über den DOM rödeln, Element rauskramen, es wird mehr Speicher belegt etc. pp.

Dann kannst du natürlich code in Funktionen auslagern. Dein FadeOutIn ist so ein Beispiel

Achtung, völlig ungetesteter code

var $allInfos = $(".country-info");
var $fallback = $('.country-info.fallback');

function switchLayer($layer) {
  const $target = $layer.length > 0 ? $layer : $fallback;

  $allInfos.fadeOut(300, function() {
    $target.fadeIn(300);
  }
}

$("#world-map path").click(function(){
  var countryCode = $(this).attr("data-code");
  var $info = $('.country-info[data-country="' + countryCode + '"]');
  switchLayer($info);
)};

$(".jvectormap-marker.jvectormap-element").click(function(){
  var countryIndex = $(this).attr("data-index");
  var $index = $('.country-info[country-index="' + countryIndex + '"]');
  switchLayer($index);
});

 

[moshpanda]

Der Code funktioniert (eine runde Klammer vergessen) und das mit dem Auslagern hab ich mir schon gedacht

Allerdings habe ich bei diesem hier

$allInfos.fadeOut(300, function() {
  $target.fadeIn(300);
});

das Problem, dass er mir erst das $target einfadet, dann ausfadet, und dann wieder einfadet. Deswegen hatte ich das so geschrieben:

$(".country-info").fadeOut(300);
if($info.get(0) !== undefined){
  $info.delay(400).fadeIn(300);
}else{
  $fallback.delay(400).fadeIn(300);
}

Wofür genau ist

const $target = $layer.length > 0 ? $layer : $fallback;

Das checkt, ob im $target das $layer eingetragen ist und führt dann $layer aus, und falls nicht dann $fallback?
Also quasi eine einzeilige if-else-Abfrage?

 

[scrollt]

Der Elvis? Jo, das ist sozusagen ein if-else Einzeiler

Bedingter (ternärer) Operator - JavaScript | MDN