javascript - IE8、jQuery UI 工具提示在 Internet Explorer 8 中立即关闭

Question

设置

我们有一个通过 mouseenter 显示的 jQuery UI 工具提示。附加到 <div class="fieldset"> 的事件(.fieldset) 元素在表单元素内。当鼠标离开 div 时，工具提示应该消失。

问题

在 IE8 中，只有 IE8，当您将鼠标悬停在 .fieldset 的区域上时，工具提示会立即消失。元素。 IE8 的行为就好像子元素实际上不是父元素的后代，或者就好像工具提示正在使用 mouseover和 mouseout事件。但是，我们使用的是 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 工具提示，它会自动绑定(bind)到任何定义了 title 属性的元素。但是，我已尝试明确附加 mouseenter和 mouseleave事件到 .fieldset div，显示和隐藏工具提示，但我仍然得到相同的行为。

以下是我如何设置工具提示:

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 工具提示将不同的事件绑定(bind)到元素(可能是“mouseout”？)，这会导致它自动关闭。

有人知道如何停止吗？

Answer 1

问题的罪魁祸首是 IE8 处理调整大小事件的方式。我使用 $(window).resize() 在窗口对象上附加了一个调整大小事件处理程序。出于某种原因，每当显示工具提示时，IE8 都会触发调整大小事件。

我使用了这篇文章中的解决方案:window.resize event firing in Internet Explorer

基本上，您必须检查以确保在触发事件之前窗口的尺寸确实发生了变化。