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

これは問題の正確な解決策ではありませんが、ラウンドアバウトの解決策で当面は解決できました。しかし、これはパフォーマンスの点で非常にコストのかかるソリューションであるため、私の場合、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 に答える
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

試してみてください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 に答える