Question

这是一个奇怪的问题，我不知道如何调试这个，所以任何提示和建议都表示赞赏。

我有一个日历（yui-calendar），它绝对定位于其中的所有内容，相对定位。我想做的是，如果我在日历外面点击，它应该关闭，否则不会......

$('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（点击页面右侧“选择投放日期”部分中的图标）

Answer 1

尝试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

的链接

Answer 2

虽然我不清楚为什么它在IE9中不起作用，但这是我弹出窗口的典型方法，当你在它外面点击时它会关闭。这是事件处理程序之间的一种微妙的舞蹈; - ）

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

Answer 3

虽然这不是问题的解决方案，但我确实设法通过环形解决方案暂时解决它。但由于这在性能方面是一个非常昂贵的解决方案，我仍然愿意接受其他想法和建议，以便在我的情况下为什么传播不会停止在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();
        }
    })

IE9中的jquery事件传播问题

3 个答案: