解决el-select组件在IOS移动端的兼容问题,点击2次才能选中
这个问题通常是由于在移动端浏览器中,el-select
组件与 IOS 的触摸事件处理机制不兼容导致的。在 IOS 设备上,点击事件可能需要更多的确认,这可能会导致需要双击才能触发点击事件。
解决方法:
- 使用第三方库,如
fastclick
,它可以解决移动端浏览器的点击事件300ms的延迟问题。
安装 fastclick
:
npm install fastclick --save
在 Vue 项目中引入并使用 fastclick
:
import FastClick from 'fastclick';
FastClick.attach(document.body);
- 如果不想引入第三方库,可以尝试监听
touchstart
事件,并立即调用click
事件:
if ('ontouchstart' in document.documentElement) {
document.body.addEventListener('touchstart', function (e) {
if (!e.target.tagName.match(/INPUT|SELECT|BUTTON|A/)) {
e.preventDefault();
}
});
document.body.addEventListener('touchend', function (e) {
if (!e.target.tagName.match(/INPUT|SELECT|BUTTON|A/)) {
e.preventDefault();
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
e.target.dispatchEvent(clickEvent);
}
});
}
以上代码会在移动端触摸时立即触发一个模拟的点击事件,从而减少点击事件的延迟。
评论已关闭