0

设置

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

问题

在 IE8 中，仅在 IE8 中，当您将鼠标悬停在.fieldset元素区域上时，工具提示会立即消失。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 工具提示，它会自动绑定到任何定义了 title 属性的元素。但是，我尝试明确附加mouseenterandmouseleave事件显式附加到.fieldsetdiv 以显示和隐藏工具提示，但我仍然得到相同的行为。

这是我设置工具提示的方法：

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


});

当窗口对象触发它的 resize 事件时，我们也会触发一个自定义的 resize 事件。

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

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

更新 根据上述事件的控制台日志，mouseenter和mouseleave事件正在按应有的方式触发。但是，我认为 jQuery UI 工具提示正在将不同的事件绑定到元素（可能是“mouseout”？），这导致它自动关闭。

有人知道如何阻止这种情况吗？

4

2 回答 2

0

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

我使用了这篇文章中的解决方案：在 Internet Explorer 中触发的 window.resize 事件

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

于 2013-11-06T16:33:34.237 回答
0

我在诺基亚 Lumia 520 Internet Explorer 11 (IE 11) 上遇到了类似的问题。我添加了用于显示工具提示的附加代码：

$(".has_tooltip").tooltip();
if (/Lumia/.test(navigator.userAgent) && getInternetExplorerVersion() == 11)
        {
                $(".has_tooltip").click(function(){
                    $(this).tooltip("open");
                })
        }

所以，在我的情况下，$(this).tooltip("open");就可以了。

*单击元素时，在我的移动应用程序中出现工具提示。

于 2017-08-24T16:35:45.963 回答