【jQuery】要素が消えずに困っています。

質問

jQuery の FullCalendar をカスタマイズしているのですが、
要素が消えずに困っています。

【希望】
カレンダー内のイベントをクリックすると、
ポップアップみたいに、詳細を表示。
ポップアップ以外をクリックで、ポップアップの非表示。

【現状】
ポップアップの表示まではできています。
カレンダー内のイベントのない日付をクリックするとポップアップは消えますが、
ポップアップが出てる状態で、カレンダー外の部分をクリックすると、
ポップアップがカーソルの場所で再表示されてしまいます。

色々調べて試してみたのですが、ちょっと分からず、
どなたかご教示いただけませんでしょうか。

よろしくお願い致します。

ソース記載します。
$(document).ready(function() {
$('body').append('<div class="tooltiptopicevent" style="background-color:#eeeeee; position:absolute; z-index:10000; padding: 10px; line-height: 200%;">details</div>');
$('body').click(function(e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
$('.tooltiptopicevent').hide();
$('#calendar').fullCalendar({
editable: true,
googleCalendarApiKey: 'hogehogehogegehogegehoge',
eventSources: [
{
googleCalendarId: 'hogehogehogegehogegehoge@group.calendar.google.com',
className: 'calendar_1'
}
],
eventClick: function (data, event, view) {
$('.tooltiptopicevent').html('イベント名 ' + ': ' + data.title + '</br>' + '詳細 ' + ': ' + [data.description,""][1*(data.description==undefined)]);
$('.tooltiptopicevent').show();
},
dayClick: function (data, event, view) {
$('.tooltiptopicevent').hide();
},
});
});

回答No.3

nekomikekamo · ベストアンサー

いくつか直します。
１、bodyへのイベント設定の動作を変更。
$('body').click(function(e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
↓これだと、すべてのクリックで要素を表示してしまう。
これをすべてのクリックで非表示にするように変更。
$('body').click(function(e) {
$('.tooltiptopicevent').hide();
});

２、予定がクリックされた場合の動作を変更。
eventClick: function (data, event, view) {
$('.tooltiptopicevent').html('イベント名 ' + ': ' + data.title + '</br>' + '詳細 ' + ': ' + [data.description,""][1*(data.description==undefined)]);
$('.tooltiptopicevent').show();
},
↓詳細表示+詳細表示場所の調整&bodyへのイベントバブリングの抑制。
eventClick: function(data, event, view) {
$('.tooltiptopicevent').html('イベント名 ' + ': ' + data.title + '</br>' + '詳細 ' + ': ' + [data.description, ""][1 *
(data.description == undefined)
]);
$('.tooltiptopicevent').css('top', event.pageY + 10);
$('.tooltiptopicevent').css('left', event.pageX + 20);
$('.tooltiptopicevent').show();
event.stopPropagation();
},
イベントのバブリングを止めることで、bodyに設定した処理が
動かないようにする。

お礼

おかげさまで、無事に解決できました！
本当に助かりました！
ありがとうございました！

回答No.2

s_boshi_cc

そうですか…一度ブラウザ側のデバッグで流れを確認していただくほうがいいかもしれないですね。

自分のイメージだと、カレンダー外のクリックでは
$('.tooltiptopicevent').hide();
$('#calendar').fullCalendar({
editable: true,
のhideを通したいのかなと思っているのですが、もしかしたらクリックされているところがカレンダー内の判定になっているかもです。

その場合はdayClickを通らない判定になってポップアップが表示されているのだと思います。

カレンダー外をクリックした時にポップアップ表示前と表示後で通る処理がどこになるかで見れば原因が分かるかもしれません。

お礼

お礼を見落としており、遅くなってしまいすみませんでした。

回答No.1

s_boshi_cc

ソースを眺めただけの状態での回答になるので
参考になるか微妙ですが、最初の辺りで
$('body').click(function(e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
$('.tooltiptopicevent').hide();
の部分で追加した要素を隠す処理をいれていますよね。
ここがうまく動いていない気がします。

最初に何もポップアップが表示されていないときに
枠外を押したときにはちゃんと何も表示されない状態に
なっていますか？

お礼

お礼を見落としており、遅くなってしまいすみませんでした。

補足

ご回答ありがとうございます。
ポップアップの表示がないときに、
枠外を押しても何も表示されていません。

私も最初の
$('body').click(function(e) {
がおかしいのかと思い色々試してはいるのですが、
改善されませんでした。