2010-12-18 8 views
1

Ich habe eine halbtransparente Kopf- und Fußzeile und ich muss auf Klick- und Hover-Ereignisse warten und das gleiche Ereignis an einem anderen DOM-Element an derselben Mausposition auslösen.jQuery-Triggerereignis an bestimmten Mauskoordinaten

Das folgende Snippet funktioniert hervorragend zum Abrufen der Mauskoordinaten, aber das Auslösen des gleichen Ereignisses mit $("#container").trigger(e); hat nicht den gewünschten Effekt.

+0

haben Sie einen 'click' Handler an das' # container' Element angehängt? –

Antwort

2

Nachdem er viel Zeit in der jQuery-Dokumentation, kam ich mit Diese Lösung, die funktioniert. @Gaby @brad danke für die Eingabe

//listen for clicks and mousemovement in the header/footer 
//and pass event through to the content div where applicable 
$("#header, #footer").bind("click mousemove", function(e){ 
    //only intercept event if it did not fall on an "a" tag 
    //within header/footer 
    if(!$(e.target).is("a")){ 
     e.preventDefault(); 
     $("#container").trigger(e); 
     return false; 
    } 
}); 

$("#container").bind("click mousemove", function(e){ 
    e.preventDefault(); 
    //get the coordinates of all "a" decendents of #container 
    $(this).find("a").each(function(){ 
     var pos = $(this).offset(); 
     var height = $(this).height(); 
     var width = $(this).width(); 
     //determine if this event happened 
     //within the bounds of this "a" element 
     if((e.pageX >= pos.left && e.pageX <= (pos.left + width)) 
      && (e.pageY >= pos.top && e.pageY <= (pos.top + height))){ 
      //if event type is mousemove, trigger hover 
      if(e.type == "mousemove"){ 
       $(this).css("text-decoration", "underline"); 
       //else, pass trigger on to element as is (click) 
      } else { 
       window.location = $(this).attr("href"); 
      } 
     } 
    }); 
    //prevent bubbling 
    return false; 
}); 
1

Die api for trigger besagt, dass es eine Zeichenfolge als Parameter verwendet. Sie übergeben Sie die tatsächliche event object, so etwas wie:

$("#container").trigger(e.type); 

funktionieren sollte.

Dies wird vorausgesetzt, Sie schon so etwas wie getan haben:

$("#container").bind('click', function(e){ //do something }); 

dh gebundene das Click-Ereignis auf die #container

+0

@brad Das funktioniert, aber ich verliere die e.pageX und e.pageY Mauskoordinaten, also weiß ich nicht wo auf #container sie klicken möchten. – Will

+0

ah Entschuldigung, habe nicht bemerkt, dass Sie das als Voraussetzung hatten ... gute Frage, ich muss darüber nachdenken. – brad

+1

@brad, die Übergabe eines Ereignisses funktioniert gut (* seit v1.3 *). Sehen Sie sich die Dokumentation unter http://api.jquery.com/trigger/ an (* 2. Konstruktor *) –

Verwandte Themen