1. 程式人生 > >移動端touch事件監聽

移動端touch事件監聽

 <ul>
      <h3 class="tit">資產資訊</h3>
      <li>
        <span class="key">品牌</span>
        <span class="val">{{equipData.eq_std}}</span>
      </li>
      <li>
        <span class="key">產地</span>
        <span class="val">{{equipData.origin
}}
</span> </li> <li> <span class="key">生產廠家</span> <span class="val">{{equipData.mfr}}</span> </li> <li> <span class="key">移交型別</span> <span class="val">{{is_transfer}}</span>
</li> <li> <span class="key">製造日期</span> <span class="val">
{{equipData.date_manufactured}}</span> </li> <li> <span class="key">採購日期</span> <span class="val">{{equipData.date_purchased
}}
</span> </li> <li> <span class="key">安裝日期</span> <span class="val">{{equipData.date_installed}}</span> </li> <li> <span class="key">驗收日期</span> <span class="val">{{equipData.date_accept}}</span> </li> <li> <span class="key">啟用日期</span> <span class="val">{{equipData.date_in_service}}</span> </li> <li> <span class="key">接管日期</span> <span class="val">{{equipData.date_takeover}}</span> </li> <li> <span class="key">進場日期</span> <span class="val">{{equipData.date_entrance}}</span> </li> <li> <span class="key">下次整機年檢日期</span> <span class="val">{{equipData.date_next_yearly}}</span> </li> <li> <span class="key">最近一次故障處理日期</span> <span class="val">{{equipData.date_lately_fault}}</span> </li> </ul> <div class="dialog" v-if="dialog" :style="{top:oHight}"> {{con}} </div>

按下span class=val標籤時,顯示懸浮框,內容是span的innerText,鬆開手,懸浮框消失

 var oVal = document.getElementsByClassName('val');
oVal[i].addEventListener("touchstart",  (e)=>{//e就是事件
                if(e.target.offsetWidth==oWidth){
                  th.con = e.target.innerText;
                  th.dialog = true;
                }
              })
              oVal[i].addEventListener("touchend",  (e)=>{
                  th.dialog = false
              })
            }

還有移動事件,touchmove