在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事件傳播問題

回答

相關問題