移动端长按事件针对华为机型失效的原因

需求背景：

原生应用嵌套h5页面，需要前端做一个自定义的长按事件，原生js封装touch事件，代码如下：

let timer = 0;
const touchStart = function (event, callback, data = {}) {// const eve = window.event || event;// eve.preventDefault ? eve.preventDefault() : (eve.returnValue = false);timer = setTimeout(() => {callback(event, data);}, 500);return false;
};const touchEnd = function () {clearTimeout(timer);return false;
};const touchMove = function () {// 使用ontouchmove调用 移动即清除clearTimeout(timer);timer = 0;
};export { touchStart, touchMove, touchEnd };

此代码中，以下两行代码可以在其他手机浏览器中正常唤起自定义的菜单，唯独华为手机不行，不限制机型，因为本人目前没有华为手机，尚不明白鸿蒙系统webview的机制，希望有知道的大佬帮忙解惑，十分感谢。

另外这个阻止默认事件会有导致其他的问题，会当前页面滑动失效，经过多处查阅资料，发现可以通过css来解决，代码如下

* {-webkit-touch-callout: none !important;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}

可以通过touch-callout 与user-select搭配实现禁用默认长按菜单的效果，可满足大部分场景需求，这个可以解决华为手机自定义长按事件失效的问题。

移动端长按事件针对华为机型失效的原因相关推荐

移动端长按事件 vue
首先去除页面默认长按事件 -webkit-touch-callout: none !important; -webkit-user-select: none; 在标签中的写法 <p@touchs ...
移动端长按事件_Flutter事件监听
一. 事件监听在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击.手指滑动.双击.长按等等. 在Flutter中,手势有两个不同的层次: 第一层:原始指针事件(Pointer Even ...
在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现
问题解决 @mouseenter.@mousedown等鼠标事件[非鼠标点击事件]时,发现事件不触发,失效了此时应该在@mouseenter.@mouseenter等鼠标事件加上native属性就好 ...
ios系统苹果手机微信端取消默认长按事件
ios系统苹果手机微信端取消默认长按事件 css代码: body{ -webkit-user-select: none; / 文本不能被选择/ user-select: none; -webkit-t ...
JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
H5移动端利用touchstart 达到长按事件
一开始的没加.native ,结果长按事件不会触发, 原因是: 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件等同于在子组件中: 子组件内部处理cl ...
任正非：进军高端市场的同时，华为要防范未来竞争者从低端崛起
任正非:进军高端市场的同时,华为要防范未来竞争者从低端崛起本文来自华为总裁任正非于去年11月14日在内部战略务虚会上的讲话. 我们公司就像赛跑冠军一样,终于跑到世界的边缘线上.大江大河.大海大 ...
android触摸事件透传,Android中父View穿透子View响应长按事件
释放双眼,带上耳机,听听看~! 需求在实际项目开发中,有这样的需求,长按整个ViewGroup响应长按事件,例如长按弹出对话框或者popwindow等等问题针对这个需求出现两种情况: 1,当Vi ...
Android SubsamplingScaleImageView(subsampling-scale-image-view)单双击长按事件【系列2】
Android SubsamplingScaleImageView(subsampling-scale-image-view)单双击长按事件[系列2] 附录参考文章1介绍了Android Subsam ...

移动端长按事件针对华为机型失效的原因

移动端长按事件针对华为机型失效的原因相关推荐

最新文章

热门文章