在IE9中jquery事件传播问题

这是一个奇怪的问题，我不知道如何去调试这个，所以任何提示和建议表示赞赏。在IE9中jquery事件传播问题

我有一个日历（yui日历），它绝对定位在里面的一切，相对定位。我想要做的是，如果我点击日历之外，它应该关闭，否则不能...

$('html').click(function(e){ 
     console.log("Event reached html level "+$(e.target).attr("class")); 
     if($(".yui-calcontainer.withtitle").is(":visible")) 
     { 
      $(".yui-calcontainer.withtitle").hide(); 
     } 
    }) 

    $(".yui-calcontainer.withtitle,#calendar_img_1").click(function(e){ 
     console.log("Event reached icon level "+$(e.target).attr("class")); 
     e.stopPropagation(); 
    });

这工作正常，在FF，甚至IE8，但在IE9，日历内的任何点击，似乎泡沫直到html级别。奇怪的是，它完全忽略了.yui-calcontainer.withtitle，即使它在页面中，但可以与#calendar_img_1合作，这基本上是我点击打开日历的图标。

You can see the issue here（点击图标 “选择交货期” 部分在页面的右边）

来源

2013-03-14 Bluemagica

JavaScript错误可能会阻止事件停止。 – 2013-03-14 05:49:57

@Jack yeh，你可能是对的，但是再次，我没有看到点击和冒泡阶段之间的任何特定错误，它也适用于ie8和FF，所以它是一些特定的东西。 – Bluemagica 2013-03-14 06:01:20

尝试cancelBubble ..

试试这个

$(".yui-calcontainer.withtitle,#calendar_img_1").click(function(e){ 
    if(e.stopPropagation){ // check stoppropogation is avilable 
    e.stopPropagation(); //use stopPropogation 
    }else{ 
    e.cancelBubble = true; // for ie 
    } 
});

有关链接cancelBubble

来源

2013-03-14 05:50:16 bipen

感谢您的信息，但可悲的是它没有工作，我根据您在上面的链接中的建议更新了我的代码 – Bluemagica 2013-03-14 05:58:09

虽然我不能确切地说明它为什么在IE9中不起作用，但这是我典型的方法r弹出的窗口，当你点击它的时候它会被关闭。这是一种事件处理程序;-)

function openCalendar() 
{ 
    // show the calendar 
    $('#calendar').show(); 

    // setup one-time event handlers to close it 
    $(document) 
    .one('click', closeCalendar) 
    .one('keydown', function(e) { 
     if (e.which==27) { 
     closeCalendar(); 
     } 
    }); 

    // make sure we stop propagation, otherwise the calendar is closed immediately 
    return false; 
} 

function closeCalendar() 
{ 
    if ($("#calendar").is(":visible")) { 
     $("#calendar").hide(); 
    } 
    // we don't need these anymore 
    $(document).unbind('click keydown'); 
} 

// make sure events don't bubble up from clicking on the calendar itself 
$("#calendar").on('click', function(e) { 
    return false; 
}); 

// register the click handler to open it 
$('.open-calendar').on('click', openCalendar);

Demo

来源

2013-03-14 06:21:10

之间微妙的舞蹈虽然这是不完全的问题的解决方案，但我还是设法解决它与一个迂回暂且解。但由于这是性能方面的一个非常昂贵的解决方案，我仍然乐于接受其他想法和建议，为什么传播不会停留在IE9中。

无论如何，我所做的是，在html点击处理程序中，检查当前事件目标是否是yui-calendar的子节点，如果是，则跳过关闭它。

$('html').click(function(e){ 
     if($(".yui-calcontainer.withtitle").is(":visible") && $(e.target).parents(".yui-calcontainer.withtitle").length<=0) 
     { 
      $(".yui-calcontainer.withtitle").hide(); 
     } 
    })

来源

2013-03-14 06:26:31 Bluemagica

在IE9中jquery事件传播问题

回答

相关问题