1

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

我有一个日历（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它基本上是我单击以打开日历的图标。

您可以在此处查看问题（单击页面右侧“选择交货日期”部分中的图标）

4

3 回答 3

0

试试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-14T05:50:16.813 回答
0

虽然我无法确切说明为什么它在 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);

演示

于 2013-03-14T06:21:10.270 回答
0

虽然这并不是问题的完全解决方案，但我确实设法通过迂回解决方案暂时解决了它。但由于在性能方面这是一个非常昂贵的解决方案，我仍然愿意接受其他想法和建议，说明为什么在我的情况下传播不会在 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-14T06:26:31.007 回答