8

これは、クリック イベントが呼び出されない原因となる、アニメーション化された要素の CSS3 Rotateと非常によく似た問題です。

私の問題は少し異なりますが、サポート情報を追加するためにコメントすることはできません.

私のサンドボックスをチェックしてください：http://jsfiddle.net/5bsG3/2/

マウスをホバーすると、リンク内に Y 軸を中心に回転するスパンがあります。クリック イベント (jQuery または単にリンク ナビゲーションの場合) は常に検出されるとは限りません。リンクのパディングされた領域をクリックしてみてください (テキストのすぐ外で、リンク上にあります)。スパンが回転していて、マウスがスパンをクリックしていない角度であるため、ヒット検出に問題があるようです。マウスがまだ LINK のパディングされた領域をクリックしているにもかかわらず。70 ～ 110 度前後の角度が問題のようです。

前述の投稿で提案された解決策は、実際にはこの問題を解決しません。また、ローテーションが JS 間隔トリガーではなく CSS 遷移として処理されるため、私の問題は少し異なる可能性があります。

何かご意見は？誰もこれを見たことがありますか？これが安っぽいリンク方法であることは承知していますが、対象の Web サイトにとっては許容範囲のチーズです。

気軽に jsfiddle を単純化してください。私は単純なものから始めて、問題を特定するのに役立つデバッグ情報を少し追加しました。

html:

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

CSS:

ul li
{
    display: inline;
    float: left ;
}

.flip-link
{
    float:left ;
}

span
{
    float:left ;
}


.flip-link {
    display: block;
    overflow: hidden;

    height: 20px;
    padding: 5px 50px 7px 50px ;
    margin-right: 10px ;

    background: #AAA;

    -webkit-perspective: 50px;
       -moz-perspective: 50px;
        -ms-perspective: 50px;
            perspective: 50px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}

.flip-link span {
    display: block;
    position: relative;

    background: #EEE;

    padding: 0px 10px ;

    -webkit-transition: all 1000ms ease;
       -moz-transition: all 1000ms ease;
        -ms-transition: all 1000ms ease;
            transition: all 1000ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

}
    .flip-link:hover span
    {
        -webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
           -moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
            -ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
                transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );

        color: #55FF55 ;
    }

JS:

var linkClickCount = 0 ;
var spanClickCount = 0 ;

$(document).ready(function () {
    $('.flip-link').click(function () {
            linkClickCount++ ;            
            $("#LinkCounter").text(linkClickCount);

            return (false);
    });

    $('.flip-link span').click(function () {
            spanClickCount++ ;            
            $("#SpanCounter").text(spanClickCount);
    });
});
4

2 に答える 2

2

問題。CSS を使用したブラウザの不一致、さらにはブラウザ間の不一致があるため、純粋な CSS ソリューションを使用すると問題が発生します。また、アニメーションの途中で CSS が実際に div を折りたたむことも認識しておく必要があります。私たちのビジョンは実際に何が起こっているのかではなく、実際に div サイズを 0 に折りたたむことです。つまり、クリックすると「実際にクリックすることはできません。以下は、絶対位置の div をオーバーレイとして配置し、クリックを処理する必要があることを示しています。明確で目に見えない div からでも、実際にリンクをクリックしているように錯覚します。

<a id="link"></a>

 $("#link").click(function(){

spanClickCount++;
$("#SpanCounter").text(spanClickCount);

}
于 2013-03-12T21:07:59.433 に答える
1

裏面が表示されるように回転された要素は、特に裏面が表示されるように強制しない限り、裏面のクリックを受け取りません。

スパンでこれを使用します。

-webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
    -ms-backface-visibility: visible;
     -o-backface-visibility: visible;

参照: http://jsfiddle.net/5bsG3/8/

于 2013-11-28T08:32:36.337 に答える