JavaScript将mouseenter事件传递给另一个元素下面的元素 [英] JavaScript pass mouseenter event to element that is underneath another element

问题描述

我正在尝试构建一个类似Google日历的小日历应用。我正在尝试使用单击和拖动功能创建事件，以便事件与网格对齐。我正在尝试
将拖动绑定到事件DIV元素下方的TD元素，该元素在向下移动时工作（延长事件），但它不能向上移动（缩小事件）。

I'm trying to build a little calendar app sort of like Google Calendar. I'm trying to create events with a click and drag functionality so that the events align to a grid. I'm trying to tie the dragging to TD elements below the event DIV element, which works when moving downwards (lengthening the event), but it doesn't work moving upwards (shrinking the event).

发生的事情是为事件DIV元素触发了mouseenter事件，但从不为基础TD触发它。如果你尝试通过向上移动来调整DIV的大小，它可以正常工作，因为TD实际上接收了mouseenter事件。

What occurs is that the mouseenter event is fired for the event DIV element, but it is never fired for the underlying TD. If you try to resize the DIV by moving upwards on the side, it works because the TDs actually receive the mouseenter event.

Google Calendar和jQuery Week Calendar使用mousemove事件，但是每个像素都会触发mousemove事件，这似乎是浪费。有没有办法在不使用mousemove事件的情况下编写它？

Google Calendar and jQuery Week Calendar use the mousemove event, but the mousemove event is fired for every pixel, which seems a waste. Is there a way to write this without using the mousemove event?

是否可以将DIV元素放在表格和TD之后？如果表格有些透明，用户仍然可以看到DIV，但实际上是在TD上发射事件。我尝试用 z-index 来做这件事，但它似乎没有实际工作。

Is it possible to put the DIV element behind the table and the TDs? If the table is somewhat transparent, the user would still be able to see the DIV, but would actually be firing events on the TDs. I tried to do this with z-index, but it didn't seem to actually work.

jsFiddle示例代码： http://jsfiddle.net/rockymeza/8SHpA/

jsFiddle example code: http://jsfiddle.net/rockymeza/8SHpA/

推荐答案

听起来你遇到了类似的问题：

It sounds like you're having a similar kind of issue that I had:

你想要的在元素后面发射事件？答案是CSS。设置指针事件：无;到了父母。

you want to fire event behind an element? The answer is CSS. Set pointer-events:none; to the parent.

我做了一个测试，试图在触摸设备上实现相同的行为（不成功）。您可以在以下网址查看： http://www.hakoniemi.net/misc/pointer-events .html 如果它可以帮助您解决问题。

I had made a test where I tried to (unsuccessfully) implement the same behavior on touch devices. You can check that at: http://www.hakoniemi.net/misc/pointer-events.html if it'd help you with your issue.

这篇关于JavaScript将mouseenter事件传递给另一个元素下面的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！