移動端web開發:使用framework7 + vue 某個事件需要在web端觸發click事件和在移動端觸發touch事件
document.getElementById("widget-head").addEventListener("touchstart",function(e){
e.preventDefault();
console.log('1');
});
document.getElementById("widget-head").addEventListener("touchend",function(e){
e.preventDefault();
console.log('2');
});
document.getElementById("widget-head").addEventListener("click",function(e){
console.log('3');
});
正常在移動端應該打印 “1,2” 只觸發touch事件,在web端應該打印 “3” 只觸發click事件
結果打印出的爲 1,2,3 說明 e.preventDefault() 未生效
原因:因爲使用的framework7 初始化應用的時候,是默認設置fastClicks:true的造成了e.preventDefault()失效
解決方式:初始化時聲明爲false
new Vue({
el: '#app',
template: '<app/>',
framework7: {
root: '#app',
routes: Routes,
fastClicks: false
},
});