JavaScript Fokus für Mauszeiger halten, wenn Maus über Kind geht

Question

Ich mache eine Kalenderanwendung und ich möchte eine Leiste haben, die über die ganze Sache geht und wenn Sie die Maus bewegen, wird die Leiste mit der Maus bewegen und Ihnen sagen Zu welcher Zeit steht die Leiste. Dies funktioniert jedoch gut, wenn Sie über ein Ereignis im Kalender mausen, das dynamisch erstellt wurde div, bleibt die Leiste an der Position hängen, an der sie sich befand, als die Maus für dieses Kalenderereignis in das untergeordnete Element div kam.

Ich habe die sieben Tage der Woche als separate divs und verwenden Sie die Klasse calendar-part der Lage sein, alle von ihnen für diese jQuery-Funktion aufzurufen:

   $(".calendar-part").mousemove(function(e){ 
        var y = e.clientY; 
        var x = e.clientX; 
        //positioning and formatting, unimportant 
        var timeVal = (y-262)/500; 
        timeVal *= 900; 
        timeVal += 280; 
        var hour = Math.floor(timeVal/60); 
        var min = Math.round(timeVal%60,2); 
        var timeEnd = "AM"; 
        if(hour>=12) 
         timeEnd = "PM"; 
        if(hour>12) 
         hour-=12; 
        if(min<10) 
         min = "0"+min; 
        var timeCalc = hour+":"+min+" "+timeEnd; 
        document.getElementById("cbar").innerHTML = timeCalc; 
        document.getElementById("cbar").style.top = y - 262; 
        document.getElementById("cbar").style.textIndent = x - 950; 
      }); 

Alle Vorschläge sind willkommen, mit oder ohne jQuery.

Answer 1

Sie können css pointer-events: none versuchen, das unerwünschte div für die Maus transparent zu machen. Dies ist wahrscheinlich der einfachste und effizienteste Weg, wenn Sie sich vorstellen, niemals eine Mausinteraktion mit dem Div zu benötigen.

Wenn Sie eine Mausinteraktion mit dem Kindelement planen, funktioniert das natürlich nicht. Anstatt clientX und clientY zu verwenden, versuchen Sie pageX und pageY relativ zu .calendar-part Offset, wie shown in this example.

Answer 2

Es stellt sich heraus, dass alles, was ich tun musste, wurde zum Selektor für diese jQuery-Funktion hinzugefügt, so dass es $(".calendar-part, .event") anstelle von nur calendar-part. Funktioniert einwandfrei. Wer vergisst darüber nachzudenken wie ich, hoffentlich hilft das!