onsen ui: 子要素にprevent-tap属性を追加する方法

Question

実現させたい事

(insertAdjacentHTMLで作成したons-list-item(tappable属性))
ons-list-item内にあるons-buttonをクリックした時にons-list-itemのtappable属性のタップ効果を無効化したい。

概要・試した事

プラットフォーム:Monaca onsen ui v2 js tabbar
ons-list-item - Onsen UI

カスタムボタンなどの特定の子要素をタップするときにタップ可能な効果を防ぐために、任意の子にprevent-tap属性を追加できます。またはのons-*ような要素はデフォルトでは無視されます。ons-buttonons-checkbox

上記のサイトを参考にlist-item内にあるbuttonクラスに自分なりに属性を追加してみたんですがlist-itemのタップ効果が無効になりませんでした。

Onsen UI : list-item内のbuttonを押したときにtappableを無効にしたい
以前にも質問をさせていただいのですが、追加表示を行う必要があるため、insertAdjacentHTMLの方法で実装していきたいと思ったので再度質問させていただきました。

ご回答よろしくお願いします。

該当のソースコード

  <ons-template id="tab1.html">
    <ons-page id="first-page">

      <ul id="list01" class="list"></ul>
    </ons-page>
  </ons-template>

  var list_code = [];

document.addEventListener('init' , function(event){
  if(event.target.matches('#first-page')){

  for(var i = 0; i < 10; i++){

    console.log(i);
        
        list_code.push(
          '<li class="list-item list-item--tappable">' + 
            '<div class="list-item__right">' +
              '<button class="button" >click</button>' +
           '</div>'+

           '<div class="list-item__center">Item' +  i  + '</div>' +
        ' </li>'
        );
      }
      document.getElementById('list01').insertAdjacentHTML("afterbegin", list_code.join(''));
   }
 });

Answer 1

ons-list-itemは、list-item--tappableクラスを使用せず、touchstartイベントなどの発火でstyleを直接変更しているので、同じような処理を行えばよろしいかと思います。

// list-item--tappableをはずす
list_code.push(
  '<li class="list-item">' + 
    '<div class="list-item__right">' +
      '<button class="button" >click</button>' +
    '</div>'+
    '<div class="list-item__center">Item' +  i  + '</div>' +
' </li>'
);

// 以下のコードを追加する
var elem = document.querySelectorAll(".list-item");
var onTouch = function (e) {
  if (e.target.nodeName != "BUTTON") {
    this.style.cssText = "transition: background-color 0s linear 0.02s, box-shadow 0s linear 0.02s; background-color: rgb(217, 217, 217); box-shadow: rgb(217, 217, 217) 0px -1px 0px 0px;";
  }
};
var onRelease = function (e) {
    this.style.cssText = "";
}
for (var j = 0; j < elem.length; j++) {
  elem[j].addEventListener("touchstart", onTouch, false);
  elem[j].addEventListener("touchend", onRelease, false);
}

Comments

[todayyy]

いつもコメントありがとうございます！
無事正常に動作できました。
ons-lsit-itemのtappable属性はcssのみで設定していると思っていたので、component-cssだけ見ていたのは盲点でした。大変勉強になりました！