質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.90%

イベント発生時にtableのセルが右へ移動するのを防ぎたい、他一点

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 730

score 23

やりたいこと

1)mouseoverのイベント発生時に、当該tableのセルが右へひとつ移動してしまうのを防ぎたい
2)ポップアップウィンドウを表示させた後、そのポップアップウィンドウ内でクリックしてもポップアップウィンドウが閉じないようにしたい

ここで掲載したHTMLしたtableのサイズは小さいですが、実際は、800くらいのセルのあるtableです。縦40*横20のtableの全セルに対し、パラメータを除き同様のポップアップを表示させるようにする。
ポップアップでクリックすると、ポップアップの下に隠れているセルをクリックしてしまうのか??ポップアップ内でクリックしてもポップアップが閉じないようにしたいです。

コンソールにエラー出力がなく、ポップアップ自体は正常に表示されるところまでは確認すみ。

やってみたこと

ここでは小さなサイズのtableを掲載していますが、実際はもっと大きなtableです。
■呼び出し側

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="popModal - jquery plugin for showing tooltips, titles, modal dialogs and etc">
<meta name="keywords" content="popup, dialog, notification-popups, modal-dialogs, html, javascript, notifications, modal, notify, confirm">
<title>popModal</title>

<style>
* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
body {background:#f1f1f1}

::-webkit-scrollbar {width:10px}
::-webkit-scrollbar-track {background-color:#f1f1f1}
::-webkit-scrollbar-thumb {background-color:#9699a2}
::-webkit-scrollbar-thumb:hover {background-color:#555}

#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px}
#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px}

.pageCaption {margin-bottom:40px;font-size:34px;line-height:40px}
.blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px}

#header {}
.prjData {float:right;font-weight:500;line-height:24px;display:flex}
.prjData > a {font-size:12px;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;margin-left:5px;transition:all 0.2s ease-in-out}
.prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)}
.prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px}
.prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999}
.prjData > .prjDownloadLink {color:#fff;background:#0084ff}
.prjData > .prjGitLink {color:#555;background:#ccc}
.prjName {font-size:24px;font-weight:500;line-height:24px}
.prjDesc {color:#777;margin-top:5px;font-size:90%}

#footer {}
.prjCopyright {color:#777}
.prjLicense {float:right;font-size:12px}
.prjAuthor {font-size:12px}

.exampleContainer {margin:-1px 0 50px}
.exampleContainer:last-child {margin-bottom:0}
.exampleContainer .exampleLive {padding:20px 0;font-size:14px}
.exampleContainer .exampleLive:after {content:'';clear:both;display:table}
.exampleContainer .exampleLive .exampleLiveTitle {padding-bottom:10px}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto;border-radius:4px}
.exampleContainer .exampleCode pre {line-height:0}
.exampleContainer .exampleCode code {white-space:pre-line}
.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
.exampleContainer .exampleCode code .tab {padding-left:15px}
.exampleContainer .exampleCode code .tab2 {padding-left:30px}
.exampleContainer .exampleCode code .tab3 {padding-left:45px}
.exampleContainer .exampleCode code .tab4 {padding-left:60px}
.exampleContainer .exampleCode code .tag {color:#97e0e9}
.exampleContainer .exampleCode code .text {color:#fff}
.exampleContainer .exampleCode code .key {color:#bf5c5b}
.exampleContainer .exampleCode code .val {color:#fadf8c}
.exampleContainer .exampleCode code .var {color:#aae997}
.exampleContainer .exampleCode code .var2 {color:#b297e9}

/* btn */

.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px;transition:all 0.3s ease-in-out}
.btn.btn-default {}
.btn.btn-default:hover {background:#eee;border-color:#bbb}
.btn.btn-default:focus {background:#ddd;border-color:#bbb}
.btn.btn-primary {background-color:#0084ff;border-color:#0084ff;color:#fff}
.btn.btn-primary:hover {background-color:#006dd2;border-color:#006dd2}
.btn.btn-primary:focus {background-color:#0155a2;border-color:#0155a2;transform:translateY(1px)}
.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}

.btn.btn-left {float:left;margin:0 5px 0 0!important}

@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<div id="page">
  <div id="header">
    <div class="prjName">popModal</div>
    <div id="page_content">
      <div class="page_container">
        <div class="page" data-page="popModal">
    <div class="exampleContainer">
    <div class="exampleLive">
    <p>日別売上表</p>
<table border="1">
<tr>
  <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th>
</tr>
<tr data-date="2018-10-01">
  <td>2018-10-01</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-02">
  <td>2018-10-02</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-03">
  <td>2018-10-03</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-04">
  <td>2018-10-04</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-05">
  <td>2018-10-05</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-06">
  <td>2018-10-06</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="./js/jquery-2.1.4.min.js"></script>
<script src="popModal.js"></script>
<script>
jQuery(function($){
  $('[data-cc]').mouseover(function(){
    $('#popModal_result').remove();
    $(this).popModal({
      html : {    url: '/example/list',
        method: 'GET',
        data: {    'cc': encodeURIComponent($(this).attr('data-cc')),
                'date': encodeURIComponent($(this).attr('data-date')) },
        dataTYpe: 'html',
        loadingText: 'Please wait...',
        errorText: 'An error has occurred'
            }
    });
    $('.popModal').css({top:"",left:""}).on('click',function(e){
      e.stopPropagation();
    });
});
});

    $(window).scroll(function(){
      getActivePage();
    });
    getActivePage();

    function getActivePage() {
      var nav = $('.page');
      for (var i = 0; i < nav.length; i++) {
        if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
          $('.tab').removeClass('active');
          $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
          break;
        }
      }
    }

});
</script>
</body>
</html>

■呼び出されるHTML
直にアドレスバーでURLを入力し表示されることを確認済

https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています

==============================================
呼び出し側のJSを修正しました。

いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Please wait...」となりなにも表示されなくなるという問題(現象)がでてきています。

予想ではありますが、
金額セルにマウスを乗った時はイベントが起きるので、ちょっとマウスを動かしただけでも内部で処理が行われる影響ではないかと思います。

マウスがセルから離れた時点で、その内部の処理を中断することはできるのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/10/22 15:21

    そもそもデバッグができなくて質問を投げる人が多い印象を受けます。デバッグができないので必要な情報を提示できていないのかな…と。今時はブラウザに標準でデバッグ機能が付いていますので、そちらを使うことを念頭に問題解決に取り組まれるのがよいかと。

    キャンセル

  • sakura-shi

    2018/10/22 16:25

    掲載したコードに誤字がありました。正常に・・イベント発生時にセルがみぎへ移動すること、ポップアップの上でクリック時にポップアップが消えること、再確認しました

    キャンセル

  • sakura-shi

    2018/10/22 16:25

    掲載したコードに誤字がありました。正常に・・イベント発生時にセルがみぎへ移動すること、ポップアップの上でクリック時にポップアップが消えること、再確認しました

    キャンセル

回答 2

+2

ようやくちょっと理解しました。

tdにdata-ccをつけるのはNGです。
popModalは対象タグの後ろにdivを挿入するのでテーブル構造が崩れ
おかしなことになっています。
spanなど適当なタグで囲って処理してください

  <td data-cc="100">123,000円</td>
  <td data-cc="101">456,000円</td>
  <td data-cc="102">789,000円</td>

   ↓↓↓

  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>

 クリック

stopPropagationでバブリングを抑制すると少しはましになるかも。

<link rel="stylesheet" href="popModal.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="popModal.js"></script>
<script>
$(function(){
  $('[data-cc]').on('mouseover',function(){
    $(this).popModal({
    html:'hoge',
    });
    $('.popModal').css({top:"",left:""}).on('click',function(e){
      e.stopPropagation();
    });

  });
});

</script>
<table border="1">
<tr>
  <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th>
</tr>
<tr data-date="2018-10-01">
  <td>2018-10-01</td>
  <td><div data-cc="100">123,000円</div></td>
  <td><div data-cc="101">456,000円</div></td>
  <td><div data-cc="102">789,000円</div></td>
</tr>
<tr data-date="2018-10-02">
  <td>2018-10-02</td>
  <td><div data-cc="100">123,000円</div></td>
  <td><div data-cc="101">456,000円</div></td>
  <td><div data-cc="102">789,000円</div></td>
</tr>
<tr data-date="2018-10-03">
  <td>2018-10-03</td>
  <td><div data-cc="100">123,000円</div></td>
  <td><div data-cc="101">456,000円</div></td>
  <td><div data-cc="102">789,000円</div></td>
</tr>
</tbody>
</table>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 21:46 編集

    ありがとうございます。
    一点目解決です!
    コードも修正しました

    もう一点
    ポップアップの上でクリックするとポップアップが消えてしまう件、おわかりでしょうか?

    キャンセル

  • 2018/10/22 22:38

    バブリングの問題かもしれないので、一応対応追記しておきました
    関係ないかもしれません。

    キャンセル

+1

オプションで設定できる範囲の話を書いてみます。

■クリックで消したくない話

デフォルトで、オプションonDocumentClickClose=trueになっており、これだと画面内どこをクリックしても、ポップアップが消えるようになっています。

で、onDocumentClickCloseをfalseにすると、画面内どこをクリックしても、ポップアップが消えなくなります。

ざっとコードを見た限りでは、
「ポップアップ内だけ」「ポップアップ外だけ」をクリックしたら消せる・消せない・・
といった細かい調整はできなさそうでした。

なので、「ポップアップ外クリックでポップアップを消したい」のであれば、
popModalのonDocumentClickCloseはfalseにした上で、「ポップアップ外クリック時にポップアップを消す処理」を自分で記述するか、popModalを改造するかの2択かも・・・。

なお、ポップアップ内の「×」ボタンも消したければ、showCloseButをfalseに。

■横にはみ出る話
既に解決済みなのは承知しておりますが、オプションの話ついでの、余談です。

デフォルトで、オプションinline=trueになっており、これだとイベントの発生した要素のすぐ「後ろ」にポップアップの要素を設置するようです。

inlineをfalseに設定することで、ポップアップの要素が<body>の最後に追加されるようになるので、レイアウトが崩れることはなくなります。

ただし、window幅によってオプションinlineが強制trueになるような記述があったので、yambejpさんの書かれた「spanなど適当なタグで囲って処理」する方法でないと、根本的な解決にはならないので、あくまで余談・・

■オプションの記述は、まとめるとこんな感じです

$(this).popModal({
  html : {
    url: '/example/detail?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')),
    errorText: 'An error has occurred'
  },
  onDocumentClickClose: false, //画面内クリックでポップアップを消さない
  showCloseBut: false, //ポップアップ内の「×」ボタンを表示しない
  inline: false, //ポップアップ要素の設置場所の変更
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 16:09

    ありがとうございます。

    いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Please wait...」となりなにも表示されなくなるという問題(現象)がでてきています。

    恐れ入りますが、この点おわかりでしょうか?

    キャンセル

  • 2018/10/30 14:13

    うーん。こちらではその症状は確認できないですね。

    popModalではなく、取得しているURL(/example/detail)に問題があるのかもしれませんね。
    そちらの処理にすごく時間がかかっていて、URLからレスポンスが返ってこない・・とか?
    コンソール見たら、レスポンスが返ってきているかがわかると思いますが、どうなっているでしょうか?

    ちなみに、今時点の掲載コードだと、URLに渡しているdateの値が取得できていないです。

    html
    <tr data-date="2018-10-01">
    <td>2018-10-01</td>
    <td><div data-cc="100">123,000円</div></td>
    <td><div data-cc="101">456,000円</div></td>
    <td><div data-cc="102">789,000円</div></td>
    </tr>

    javascript (かなり省略版)
    $('[data-cc]').mouseover(function(){
      console.log($(this).attr('data-date')); // undefinedになります
    });

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る