不透明度为0（不可见）的CSS3元素响应鼠标事件 [英] CSS3 Element with Opacity:0 (invisible) responds to mouse events

问题描述

在Safari中使用Webkit的CSS3；我有一个按钮，单击该按钮会使div淡入。该div只是一个大的填充矩形，并且其中包含几个按钮，其中一个导致同一div淡出。

CSS3 using Webkit in Safari; I have a button that, when clicked, causes a div to fade in. That div is just a big filled rectangle and it has a few buttons in it, one of whichcauses the same div to fade out.

问题是这样的：当元素淡出（不透明度：0），并且我单击按钮之一所在的位置时，onClick仍然被触发。换句话说，即使看不见该按钮（不透明度：0），该按钮仍然存在，并且是事件模型的一部分。我不要

The problem is this: When the element has faded out (opacity:0), and I click where one of the buttons was, the onClick is still being fired. In otherwords, even though the button can't be seen (opacity:0) it's still there and is part of the event model. I don't want that.

按钮调用以下功能：

//  This displays the overlay (popup)
function showCategoryPopup() {

 // Was playing with the following, but with no success.
 //  popupCategory.style.display = "block";
 //  popupCategory.style.visibility = "visible";

 // Change the attributes that will be animated.
 popupCategory.style.opacity = 1; 
 popupCategory.style.webkitTransform = "scale(1.0)";
}

function hideCategoryPopup() {
 // Change the animated attributes
 popupCategory.style.opacity = 0; 
 popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events.  So, make it hidden?
//    popupCategory.style.visibility = "hidden";
//    popupCategory.style.display = "none";     

}

叠加层是这样的：

.popupContainer {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}

如果我根本不使用可见性或显示设置，则动画很好，但是会为不可见的项目触发mouseClick事件。

If I don't use the visibility or display settings at all, the animation is fine, but the mouseClick events are triggered for the invisible items.

如果我使用积木，则它会在没有动画的情况下打开/关闭。

If I use the blocks, then it toggles on/off with no animation.

如果我使用显示样式，然后进行某种工作，但并没有立即显示动画，而是仅在触发页面中的其他事件（如页面上其他位置的另一个按钮）时触发。

If I use the display style, then it sort of works but instead of having the animation display immediately, it only triggers once some other event in the page is triggered, like another button elsewhere on the page.

我想也许是在隐藏后的弹出div样式中添加 pointer-events：none，但是我要的似乎是您经常遇到的不透明性，因此必须是半常见的问题。

I thought maybe of adding the "pointer-events:none" to the style used by the pop-up div after it's hidden, but what I'm asking for seems like something you'd often encounter with opacity so it must be a semi-frequent problem.

有想法吗？

推荐答案

如果您将 div 的不透明度设置为零，那么您仍然可以与不可见项进行交互。您想将其设置为 display：none 。两者都可以做，让 div 淡出为零，然后在动画时在 display：none 上固定已经结束。

If you're setting your div to have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:none instead. You could do both, allowing the div to fade out to zero and then tack on the display:none when the animation has finished.

这篇关于不透明度为0（不可见）的CSS3元素响应鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！