✔ Hover Funktion nach Klick auf das Kontextmenü verlassen

[Thomas_Jung]

Hallo,
ziel ist es beim Rechtsklick auf das Kontextmenü die ID der class 'image' anzuzeiegn.
Das funktioniert auch soweit.
Bewege ich anschließend die Maus wird die Hover Funktion immer wieder ausgeführt.
Was muss ich tun um die Hover Funktion wieder zu verlassen nach dem Klick auf das Kontextmenü.

Gruß Thomas

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.image').bind("contextmenu",function(e){
  e.preventDefault();
  console.log(e.pageX + "," + e.pageY);
  $("#cntnr").css("left",e.pageX);
  $("#cntnr").css("top",e.pageY);
// $("#cntnr").hide(100);      
  $("#cntnr").fadeIn(200,startFocusOut());    
});

function startFocusOut(){
  $(document).on("click",function(){
  $("#cntnr").hide();      
  $(document).off("click");
  });
}


$("#items > li").click(function(){
  
  if( $(this).attr("data-action") == '1' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }
  if( $(this).attr("data-action") == '2' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }
  if( $(this).attr("data-action") == '3' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }    
  if( $(this).attr("data-action") == '4' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }
  if( $(this).attr("data-action") == '5' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }
  if( $(this).attr("data-action") == '6' ){ $("#op").text( $(this).attr("data-action") );  $(".image").hover(function(eventObj) { console.log(eventObj.target.id);  });  }
 
});
});//]]>

</script>


  <span id="op"></span>
  <div id='cntnr'>
    <ul id='items'>
      <li data-action="1">Link 1</li>
      <li data-action="2">Link 2</li>
      <li data-action="3">Link 3</li> 
    </ul>
    <hr />
    <ul id="items">
      <li data-action="4">Link 4</li>
    </ul>
    <hr />
    <ul id='items'>
      <li data-action="5">Link 5</li>
      <li data-action="6">Link 6</li> 
    </ul>
  </div>
 



<div id="100" class="image" style="padding:5px; background-color:red; color:#FFFFFF;">1</div><br>
<div id="200" class="image" style="padding:5px; background-color:red; color:#FFFFFF;">2</div><br>
<div id="300" class="image" style="padding:5px; background-color:red; color:#FFFFFF;">3</div><br>
<div id="400" class="image" style="padding:5px; background-color:red; color:#FFFFFF;">4</div><br>

 

[Quaese]

Hi,

ich bin mir nicht sicher, ob ich dein Problem richtig verstehe. Du willst nach einem Klick im Contextmenu kein hover-Eventhandling? Warum registrierst du den hover-Event dann überhaupt beim Klick aufs Menu?

Wäre eventuell gut, wenn du beschreiben würdest, welches Verhalten du überhaupt erwartest.

Ciao
Quaese

 

[Thomas_Jung]

Hallo
Ich möchte mit der Maus über einen div mit der Class 'image' Rechtsklicken und wenn ich dann auf einen Menüpunkt klicke möchte ich die jeweilige ID des div angezeigt bekommen. Deshalb das hover.
Nach dem Klick im Menü soll das hover wieder verschwinden und beim nächsten Rechtsklicken wieder aktiv sein.
Gruss Thomas

 

[Quaese]

Hi,

wenn du nur den Klick auf den Menupunkten auswerten möchtest, benötigst du das hover doch gar nicht. Um die ID anzuzeigen sollte doch folgendes ausreichen:

    $("#items > li").on('click', function() {
        $("#op").text($(this).attr("data-action"));
    });

Ansonsten ist es mit jQuery grundsätzlich möglich, Events in Namespaces auszuführen.

$('#element').on('hover.myEvent', function(e) { /* do something */});

Soll der Eventhandler wieder entfernt werden, erfolgt das über die off-Methode:

$('#element').off('hover.myEvent');

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[Thomas_Jung]

Werde es damit probieren.

Danke