touchmove下的event.touchs[0].target节点不随移动而改变的解决方案

本文探讨了在手机端使用touchmove事件时遇到的难点,即event.touchs[0].target值不随手指滑动而变化的问题,并提供了一种临时解决方案。通过分析不同浏览器的行为差异,提出了在Chrome Mobile环境下的一种改进方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在手机端使用touchmove时,希望event.touchs[0].target随着手指滑动而改变值,但实际上无论怎么滑动event.touchs[0].target的值都是初始的节点,在网上查询后找到一种临时解决方案:


onElementTouchMove: function(e) {
if (Ext.browser.is.ChromeMobile) {
var x = e.changedTouches[0].screenX;
var y = e.changedTouches[0].screenY;
} else {
var x = e.pageX;
var y = e.pageY
}
var target = document.elementFromPoint(x, y);
}


哪位大侠有更好的解决方案,请回复下共享。
### 三级标题:Understanding and Resolving the Warning About Non-Passive Event Listeners Affecting Scroll Performance 在现代 Web 开发中,浏览器为了优化页面滚动性能,引入了 Passive Event Listeners 机制。该机制主要用于 `touchstart`、`touchmove` 和 `wheel` 等可能影响滚动性能的事件。当开发者为这些事件添加非被动(non-passive)监听器时,浏览器会发出类似 `[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event` 的警告[^3]。 这一警告的出现通常意味着事件监听器可能会阻塞页面滚动,从而影响用户体验。特别是在移动设备上,非被动事件监听器可能导致滚动延迟或流畅。为了解决这个问题,开发者应将这些事件标记为 `passive`,以告知浏览器监听器不会调用 `preventDefault()`,从而允许浏览器提前优化滚动行为[^4]。 ### 三级标题:How to Fix the Warning 'Added Non-Passive Event Listener to a Scroll-Blocking Touchmove Event' in Web Development 解决该警告的核心方法是将 `touchmove` 事件监听器标记为 `passive`。具体实现方式如下: 1. **在原生 JavaScript 中添加 passive 监听器** 使用 `addEventListener` 时,可以通过传递一个包含 `passive: true` 的选项对象来注册被动监听器: ```javascript document.addEventListener('touchmove', function(event) { // 你的逻辑代码 }, { passive: true }); ``` 2. **在 Vue 项目中处理 ElementUI 表单校验警告** 如果项目中使用的是 ElementUI,并且在表单校验时出现该警告,可以通过修改 ElementUI 的源码或使用自定义指令来处理。例如,可以在 `mounted` 钩子中通过 `querySelectorAll` 找到相关元素并手动设置 `passive`: ```javascript mounted() { const touchElements = document.querySelectorAll('.el-form'); touchElements.forEach(el => { el.addEventListener('touchmove', () => {}, { passive: true }); }); } ``` 3. **使用 Vue 自定义指令统一处理事件** 可以创建一个自定义指令,在组件渲染时自动为特定元素添加 `passive` 监听器: ```javascript Vue.directive('passive-touch', { bind(el) { el.addEventListener('touchmove', () => {}, { passive: true }); } }); ``` 在模板中使用: ```html <div v-passive-touch> <!-- 你的内容 --> </div> ``` ### 三级标题:性能优化与浏览器支持 Chrome 从 51 版本开始支持 Passive Event Listeners,其他现代浏览器如 Firefox 和 Safari 也陆续支持该特性[^5]。通过合理使用 `passive` 选项,可以显著提升页面滚动性能,尤其是在移动设备上。需要注意的是,`passive` 仅适用于不会调用 `preventDefault()` 的监听器。如果尝试在 `passive` 监听器中调用 `preventDefault()`,浏览器可能会抛出警告甚至忽略该调用[^4]。 此外,开发者应定期检查项目中是否存在非被动事件监听器,特别是在使用第三方 UI 框架(如 ElementUI)时。可以通过浏览器开发者工具的 Performance 面板分析事件监听器的执行情况,并结合 Lighthouse 进行性能评分优化[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值