Thomas_Jung
Erfahrenes Mitglied
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
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
Code:
<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>