在Firefox中添加指针事件后，光标重置为默认值：无

I've encountered a strange behaviour regarding CSS relationship between CSS pointer-events and cursor rules in Firefox. When I set an element's cursor to any value different from auto (let's say it's wait), the type of the cursor changes accordingly, as expected. However, when I also add pointer-events: none to the same element, the cursor is reset to auto. The same happens if I use cursor: wait !important. The very same rules work correctly in Chromium and IE (!).

我在Firefox中遇到了CSS指针事件和游标规则之间CSS关系的奇怪行为。当我将元素的光标设置为与auto不同的任何值时(让我们说它等待),光标的类型会相应地改变,如预期的那样。但是,当我还将pointer-events:none添加到同一元素时,光标将重置为auto。如果我使用游标也会发生同样的情况:wait!important。相同的规则在Chromium和IE(!)中正常工作。

In the beginning I thought that this may be expected behaviour when pointer-events: none is set, but according to the MDN section about the none value:

在开始时我认为这可能是指针事件:无设置时的预期行为,但根据MDN部分关于无值:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

该元素永远不是鼠标事件的目标;但是,如果这些后代将指针事件设置为某个其他值,则鼠标事件可能会以其后代元素为目标。在这些情况下,鼠标事件将在事件捕获/冒泡阶段期间根据往返于后代的方式触发此父元素上的事件侦听器。

It appears that the Javascript events, not CSS events won't be propagated.

似乎Javascript事件,而不是CSS事件将不会传播。

The question is: is there a way to use both pointer-events: none and cursor: wait on the same element in Firefox? Also, am I right about the interpretation of Javascript/CSS events regarding the mentioned excerpt?

问题是:有没有办法同时使用指针事件:none和cursor:等待Firefox中的同一个元素?另外,关于上述摘录的Javascript / CSS事件的解释,我是否正确?

If it matters, I'm using Firefox 31 on Ubuntu 64bit

如果重要的话,我在Ubuntu 64bit上使用Firefox 31

Here's a fiddle. In this case I'm adding rules dynamically, but the same occurs when using CSS only. The scenario I'm talking about is Change cursor to wait --> Disable pointer events

这是一个小提琴。在这种情况下,我正在动态添加规则,但仅在使用CSS时会发生相同的情况。我正在谈论的场景是将光标更改为等待 - >禁用指针事件

1 个解决方案

#1

Turns out that you have to set cursor on the parent element.

原来你必须在父元素上设置光标。

Setting both styles on one element or cursor on nested element resets the cursor to default pointer.

在嵌套元素上的一个元素或光标上设置两种样式会将光标重置为默认指针。

<div class="cursor-wait">
    <a href="#">wait</a>
    <div class="no-pointer-events">
        <a href="#">wait > no events</a><!-- works here -->
    </div>
</div>

See Fiddle for details.

详情请见小提琴。

#1