移動端touch事件監聽
阿新 • • 發佈:2019-02-07
<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