Question

我正在制作一个日历应用程序，我希望有一个跨越整个事物的条形图，每当你移动鼠标时，条形图将随着鼠标移动并告诉你条形图代表什么时间。这很好，但是，当鼠标悬停在日历上的事件（动态创建的div）时，当鼠标进入该日历的鼠标div时，该栏会卡在它所处的位置事件。

我将一周中的七天作为单独的divs并使用类calendar-part来为此jQuery函数调用所有这些：

              $(".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;
             });

欢迎使用任何建议，无论是否有jQuery。

Answer 1

您可以尝试使用css pointer-events: none使不需要的div对鼠标透明。如果您想象永远不需要与div进行任何鼠标交互，这可能是最简单，最有效的方法。

如果您计划与子元素进行鼠标交互，那么显然不会起作用。不要使用clientX和clientY，而是将pageX和pageY相对于.calendar-part的偏移量设为shown in this example。

Answer 2

事实证明，我需要做的就是添加到这个jQuery函数的选择器，使其成为$(".calendar-part, .event")而不是calendar-part。工作完美无瑕。任何忘记像我一样忘记这一点的人，希望这会有所帮助！

当鼠标越过孩子时，JavaScript会继续关注mousemove

2 个答案: