Onsen UI : list-item内のbuttonを押したときにtappableを無効にしたい

実現させたい事

BUTTONを押したときにlist-itemのtappableのタップアクションを無効にしたいです。

概要

プラットフォーム：Onsen UI V2 JS Tabbar

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16
17
18    document.addEventListener('show', function(event) {
19      var page = event.target;
20      var titleElement = document.querySelector('#toolbar-title');
21
22      if (page.matches('#first-page')) {
23        titleElement.innerHTML = 'My app - Page 1';
24      } else if (page.matches('#second-page')) {
25        titleElement.innerHTML = 'My app - Page 2';
26      }
27    });
28
29    if (ons.platform.isIPhoneX()) {
30      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
31      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
32    }
33  </script>
34  <script src="test.js"></script>
35</head>
36<body>
37  <ons-page>
38    <ons-toolbar>
39      <div class="center" id="toolbar-title"></div>
40    </ons-toolbar>
41    <ons-tabbar position="auto">
42      <ons-tab label="Tab 1" page="tab1.html" active>
43      </ons-tab>
44      <ons-tab label="Tab 2" page="tab2.html">
45      </ons-tab>
46    </ons-tabbar>
47  </ons-page>
48
49  <ons-template id="tab1.html">
50    <ons-page id="first-page">
51
52        <ul class="list" id="ons-list"></ul>
53      
54    </ons-page>
55  </ons-template>
56
57  <ons-template id="tab2.html">
58    <ons-page id="second-page">
59      <p style="text-align: center;">
60        This is the second page.
61      </p>
62    </ons-page>
63  </ons-template>
64</body>
65</html>

javascript
1// test.js
2ons.ready(function(){
3
4
5var list = [];
6
7for(var i = 1; i <= 90; i++){
8  list.push(
9    '<li id="item" class="list-item list-item--longdivider list-item--tappable" onclick="test();">' +
10
11    '<div class="list-item__center">Item '+ i + '</div>' +
12    '<div class="list-item__right"><button class="button" onclick="test2();">BUTTON</button></div>' +
13    '</li> '
14  )
15}
16
17document.getElementById('ons-list').innerHTML = list.join('');
18
19});
20
21function test(){
22  ons.notification.toast('リストからタップ', { timeout: 1000, animation: 'fall' }) ;
23}
24
25function test2(){
26  event.stopPropagation();
27  ons.notification.toast('リスト内のボタンからタップ', { timeout: 1000, animation: 'fall' }) ;
28}

行動規範の内容に同意します

回答1件

ベストアンサー

ボタン押したときにリストの色変わるのを変わらないようにするってことなら

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
6  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
7  <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
8
9  <script>
10    document.addEventListener('show', function(event) {
11      var page = event.target;
12      var titleElement = document.querySelector('#toolbar-title');
13
14      if (page.matches('#first-page')) {
15        titleElement.innerHTML = 'My app - Page 1';
16      } else if (page.matches('#second-page')) {
17        titleElement.innerHTML = 'My app - Page 2';
18      }
19    });
20
21    if (ons.platform.isIPhoneX()) {
22      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
23      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
24    }
25    
26    ons.ready(function(){
27      var list = [];
28
29      for(var i = 1; i <= 90; i++){
30        list.push(
31          '<ons-list-item modifier="longdivider" tappable onclick="test();">' +
32          '<div class="left">Item '+ i + '</div>' +
33          '<div class="right"><ons-button onclick="test2();">BUTTON</ons-button></div>' +
34          '</ons-list-item>'
35        )
36      }
37
38      document.getElementById('ons-list').innerHTML = list.join('');
39    });
40
41    function test(){
42      ons.notification.toast('リストからタップ', { timeout: 1000, animation: 'fall' }) ;
43    }
44
45    function test2(){
46      event.stopPropagation();
47      ons.notification.toast('リスト内のボタンからタップ', { timeout: 1000, animation: 'fall' }) ;
48    }
49  </script>
50  
51  <style type="text/css">
52  <!--
53  -->
54  </style>
55
56</head>
57<body>
58  <ons-page>
59    <ons-toolbar>
60      <div class="center" id="toolbar-title"></div>
61    </ons-toolbar>
62    <ons-tabbar position="auto">
63      <ons-tab label="Tab 1" page="tab1.html" active>
64      </ons-tab>
65      <ons-tab label="Tab 2" page="tab2.html">
66      </ons-tab>
67    </ons-tabbar>
68  </ons-page>
69
70  <ons-template id="tab1.html">
71    <ons-page id="first-page">
72       <ons-list id="ons-list">
73       </ons-list>
74    </ons-page>
75  </ons-template>
76
77  <ons-template id="tab2.html">
78    <ons-page id="second-page">
79      <p style="text-align: center;">
80        This is the second page.
81      </p>
82    </ons-page>
83  </ons-template>
84</body>
85<script>
86</script>
87</html>

こういうことかな

投稿2020/05/28 10:09

rururu3

総合スコア5545

todayyy

2020/05/28 10:43 編集

コメントありがとうございます！rururuさんのコードをコピペしたところ理想通りになりました！ただ、innerHTMLの場合はそれで動作すると思いますが、 insertAdjacentHTMLでやる場合だとコードがliのクラス指定になるのでできない感じでしょうか？

rururu3

2020/05/28 10:45

insertAdjacentHTMLではできない？

todayyy

2020/05/28 12:27

insertAdjacentHTMLの場合だとlistにpushするコードliにクラス指定で入力しないとできないです！ rururuさんのlistにpushしたコードだとons-listが正常に表示されないので、liでクラス指定する必要があります。その場合だとやはりtappbleが反応して色が変更されてしまいます。私が最初の質問内容でinnerHTMLでしてたので修正しときます！

rururu3

2020/05/28 15:22

insertAdjacentHTMLじゃないとだめな理由がわからないです

todayyy

2020/05/29 11:16

今後使用してい上でinsertAdjacentHTMLのほうがいいかなと思いまして・・・特別な理由が特にないのでinnerHTMLのほうで使わせていただきます！質問に答えてくださりありがとうございます！

行動規範の内容に同意します