0

セットアップ

フォーム要素内の (.fieldset) 要素に関連付けられたmouseenterイベントを介して表示される jQuery UI ツールチップがあります。<div class="fieldset">マウスが div を離れると、ツールチップが消えるはずです。

問題

.fieldsetIE8 (IE8 のみ) では、要素の領域にカーソルを合わせると、ツールヒントがすぐに消えます。IE8 は、子要素が実際には親要素の子孫ではないかのように、またはツールヒントがmouseoverandmouseoutイベントを使用しているかのように動作します。ただし、このツールチップにはmouseenterおよびmouseleaveイベントを使用しています。

.fieldset要素に無地の背景を与えてみました。透過画像も作ってみました。子要素をチェックして、z-index違いがないことを確認しました。私がしていることは何もうまくいかないようです。

マウスが.fieldset要素とその子の上に置かれている間、ツールチップを表示したままにする必要があります。

コード

HTML:

<form class="form centerBH" id="form" style="display: block; zoom: 1;">

    <div class="fieldset">

        <h2 class="legend">Autogenerated Image Links</h2>

        <div id="image" class="panebox" >
        <div class="ui-widget"> 
            <ul>

            </ul>
        </div>      
        </div>

    </div>
</form>

CSS:

.form {

    width: 50em;

    /* correct margin collapse in IE */
    overflow: auto;
}

/* ensure all form elements will fade in and out */
form * {

    filter: inherit;

}

.panebox {

    background-color: #F7F7F7;

    border-color: #B7B9BD;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;

    box-shadow:  0px 1px 0px 0px rgba(255,255,255,.7), 0px 1px 2px 0px rgba(0,0,0,.1);

    margin: 7px;
    padding: 14px;

    position: relative;

    overflow: hidden;
}

JavaScript:

ここでも、jQuery UI ツールチップを使用しています。これは、タイトル属性が定義されているすべての要素に自動的にバインドされます。mouseenterただし、ツールチップを表示および非表示にするために、およびmouseleaveイベントをdiv に明示的にアタッチしようとしまし.fieldsetたが、それでも同じ動作が得られます。

ツールチップを設定する方法は次のとおりです。

this.fieldsetTooltip=this.$(".fieldset").tooltip({

            content: 'Click an image link to open that image.',
            disabled: true,
            items: ".fieldset",
            position: {
                my:"left+20 top+25", 
                at:"right top",
                collision: "none",
                using: function( position, feedback ) {

                    //console.log(feedback.target.width);

                    $( this ).css( position );

                    $( "<div>" )
                        .addClass( "arrow" )
                        .addClass( feedback.vertical )
                        .addClass( feedback.horizontal )
                        .appendTo( this );
                }

            }
        });

ツールチップを手動で開いたり閉じたりする方法は次のとおりです。

this.$el.on("mouseenter",'.fieldset',function(e){

        console.log("Mouse entering .fieldset");
        _this.fieldsetTooltip.tooltip("open");


});


this.$el.on("mouseleave",'.fieldset',function(e){

        console.log("Mouse leaving .fieldset");
        _this.fieldsetTooltip.tooltip("close");


});

また、ウィンドウ オブジェクトがそのサイズ変更イベントをトリガーするときに、カスタムのサイズ変更イベントをトリガーします。

// close tooltip when user resizes the window
this.listenTo(AppReg.events,"context:resized",function() {

        _this.fieldsetTooltip.tooltip("close");
});

更新 上記のイベントのコンソール ログに基づいて、mouseenterおよびmouseleaveイベントが正常に起動しています。ただし、jQuery UI ツールチップが別のイベントを要素 (おそらく「マウスアウト」?) にバインドしているため、自動的に閉じていると思います。

これを止める方法を知っている人はいますか？

4

2 に答える 2

0

この問題の原因は、IE8 がサイズ変更イベントを処理する方法にあります。を使用して、ウィンドウ オブジェクトにサイズ変更イベント ハンドラをアタッチしていました$(window).resize()。何らかの理由で、ツールチップが表示されるたびに IE8 がサイズ変更イベントを発生させていました。

この投稿の解決策を使用しました: Internet Explorer で発生する window.resize イベント

基本的に、イベントを発生させる前に、ウィンドウのサイズが実際に変更されたことを確認する必要があります。

于 2013-11-06T16:33:34.237 に答える