不透明度を持つCSS3要素：0（不可視）はマウスイベントに応答します

Question

CSS3はSafariでWebkitを使用しています。クリックするとdivがフェードインされるボタンがあります。そのdivはちょうど大きな塗りつぶしの矩形で、その中にはいくつかのボタンがあり、その1つでは同じdivがフェードアウトします。

問題は次のとおりです。要素がフェードアウト（不透明度：0）し、ボタンの1つがクリックされたときにonClickがまだ起動されています。言い換えれば、ボタンが見えなくても（不透明度：0）、それはまだそこにあり、イベントモデルの一部です。私はそれを望んでいない。

ボタンには、次の関数を呼び出す：

// 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";  

}

オーバーレイのためのCSSクラスはこれです：私は、視認性や表示の設定を使用しない場合

.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イベントがトリガーされます。

ブロックを使用すると、アニメーションなしでオン/オフが切り替わります。

表示スタイルを使用すると、アニメーションがすぐに表示される代わりに、アニメーションがすぐに表示されます。ページ内の他のボタンと同じように、ページ内の他のイベントがトリガーされると発生します。

私は、ポップアップdivで使用されているスタイルに "pointer-events：none"を追加したかもしれないと思っていましたが、私が求めていることは、半期的な問題でなければなりません。

思考？

Answer 1

divに不透明度をゼロに設定している場合は、「不可視」アイテムとやりとりすることができます。代わりにdisplay:noneに設定します。両方を行うことができます。divを0にフェードアウトさせてから、アニメーションが終了するとdisplay:noneをタックします。

Answer 2

あなたが持っている問題のクリーンな解決策は、ツールチップやモーダルポップアップのように「フェードイン」エフェクトを使用した場合の共通の問題ですが、不透明度だけでなく、 "visibility"プロパティ。 'display'とは異なり、 'visibility'は実際のアニメーション可能なプロパティであり、遷移が始まる前と遷移した後でのみ、要素を不可視（入力イベントに応答しない）にします。初期状態。

これまでの回答は機能しますが、あまり望ましくない可能性があるプロパティを操作するJavaScriptに依存します。これらすべてを純粋なCSSで行うことで、JavaScriptは、表示する必要がある要素のクラスを設定および解除する以外に何もしなければなりません。ツールヒントを作成している場合は、ツールチップを子要素にし、親に 'hover'擬似セレクタを使用することで、JSなしで行うことができます。

だから何かをクリックすることでトリガーポップアップ用のために、あなたはそうのようにそれをスタイルになります。

#popup 
{ 
    /* ...cosmetic styling, positioning etc... */ 

    -webkit-transition: all 0.2s ease-in-out 0s; 
    -moz-transition: all 0.2s ease-in-out 0s; 
    -ms-transition: all 0.2s ease-in-out 0s; 
    transition: all 0.2s ease-in-out 0s; 

    opacity: 0; 
    visibility: hidden; 
} 

#popup.shown 
{ 
    opacity: 1; 
    visibility: visible; 
} 

次に、あなたのJavaScriptが単に「示す」クラスを切り替えることができます。

ライブ例：あなたは何ができるかhttp://jsfiddle.net/y33cR/2/

Answer 3

は不透明度が次のスタイルで0に設定されている状態でボタンを無効である：

pointer-events: none; 
cursor: default; 

彼らはクリックできません。この方法で、カーソルボタンがどこにあったのかは変わりません。 CSSのみのソリューションが必要でしたが、これは私のために働いていました。