みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

【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();
},
});
});

投稿日時 - 2018-10-26 18:18:12

QNo.9551474

困ってます

質問者が選んだベストアンサー

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

2、予定がクリックされた場合の動作を変更。
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に設定した処理が
動かないようにする。

投稿日時 - 2018-10-29 20:22:55

お礼

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

投稿日時 - 2018-10-30 13:36:01

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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

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

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

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

投稿日時 - 2018-10-29 17:11:29

お礼

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

投稿日時 - 2018-12-28 12:35:01

ANo.1

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

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

投稿日時 - 2018-10-28 01:32:19

補足

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

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

投稿日時 - 2018-10-29 10:06:15

お礼

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

投稿日時 - 2018-12-28 12:35:22

あなたにオススメの質問