元素背面没有鼠标事件

Posted 2023-05-07

【中文标题】元素背面没有鼠标事件

【英文标题】：No mouse events on element's backface

【发布时间】：2013-08-30 21:19:17

【问题描述】：

我正在编写一个网络应用程序，其中包含一个类似于this 页面上的第一个示例的“卡片翻转”动画（尽管我通过单击而不是悬停来触发动画）。翻转正在工作，但是当动画完成并且backface 可见时，元素上没有注册鼠标事件 - 单击、悬停甚至文本选择。任何想法为什么鼠标事件没有注册？

这是一个小提琴：http://jsfiddle.net/NathanFriend/3gUPA/

我使用的是 Chrome 29。我的应用只需要在此浏览器中运行即可。

【问题讨论】：

听起来您需要使用.on() 方法进行委托，因为这是backface 在DOM 中的第一次出现。如果您创建一个 jsFiddle 会更容易。

@DevlshOne 查看我在编辑中添加的小提琴。

卡片翻转后，您没有任何要注册的鼠标事件，是吗？无论如何，不​​在这个小提琴中。

@DevIshOne 感谢您的浏览。 flip-trigger 元素仍应切换 flipped 类，即使在元素已被转换后也是如此。另请注意，无法选择背面的文本，并且back-container 的cursor: pointer CSS 属性似乎被忽略了。

在下面查看我的答案...

【参考方案1】：

jsFiddle DEMO

要解决评论中的问题，您只需更改此 CSS：

.flipped 
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: visible;

这就是我所说的事件委托...

$(".flip-container").on('click','.flip-trigger',function () 
    $(".flip-card").toggleClass("flipped");
);

jQuery .on() event delegation documentation

因为我已经告诉.on() 事件绑定到具有.flip-container 类的元素，它现在可以对当前（或将来）作为NodeList 实体的任何元素有效！例如，.flip-trigger，它在卡片翻转之前绑定到卡片。现在，要让它重新翻转（或其他），您可以执行以下操作：

$(".flip-container").on('hover','.flipped',function () 
    alert('This is a flipped over card!');
);

【讨论】：

感谢您的回答。我很惊讶 .on() 方法是必要的 - 页面加载时 NodeList 中是否已经存在背面，只是不可见？另外，为什么在这个例子中：jsfiddle.net/NathanFriend/rDJBp .flipped 类不需要 backface-visiblity 属性？