折腾:
【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期
期间,后来又让同事去换成腾讯的X5内核,然后结果问题依旧:
还是滑动选择日期,有问题,基本不工作,偶尔工作。
不过发现一个现象:
同事的正常滑动选择日期的Android手机,没有打印对应的错误log
而自己的有问题的Android手机,在滑动时会打印出错误log:
I/chromium: [INFO:CONSOLE(1)] "Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.", source: http://xxx/uapp/bundle_ce946af8145e91329862.js (1) |
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted
关于chrome手机调试模式touch的BUG – createjs技术博客
去搜项目里面的代码:
cancelable
结果库中没有搜索到:
然后项目代码中,却也没有搜索到源码,但是生成的bundle.js中却有:
相关部分的代码为:
("lang"),l='<body style="margin:0;"><img src="’+s+’" style="max-width:100%;" title="’+(u&&u[0]||"")+’" /></body>’;window.open().document.write(l)}else o.dispatchEvent(new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1}))},n(69).register("saveAsImage",i),t.exports=i}, |
关于chrome手机调试模式touch的BUG – createjs技术博客
javascript – Touch move getting stuck Ignored attempt to cancel a touchmove – Stack Overflow
说是让touchend返回return true就可以了?
-》但是我之前别处的picker中,handleTouchEnd中也是没有return true的啊:
handleTouchEnd (e) { e.preventDefault(); if (this.props.data.list.length <= 1) { return; } this.endY = e.nativeEvent.changedTouches[0].pageY; // 实际滚动距离 let v = parseInt(this.endY – this.startY); let value = v % this.itemHeight; // 计算出每次拖动的36px整倍数 this.currentY += (v – value); // 正数y最大值 const max1 = 2 * this.itemHeight; // 负数y最小值 const max2 = (this.props.data.list.length – 3) * this.itemHeight; if (this.currentY > max1) { this.currentY = max1; } else if (this.currentY > 0 && this.currentY < max1) { this.currentY = this.currentY; } else if (this.currentY === max1) { this.currentY = this.currentY; } else if (Math.abs(this.currentY) > max2) { this.currentY = – max2; } this.countListIndex(this.currentY); this.setState({ style: { transform: `translate3d(0px, ${ this.currentY }px, 0px)` } }); } |
却也可以正常工作?
在Chrome中,正在滚动的话,touchmove期间调用preventDefault,是没用的
-》但是此处的react-mobile-datepicker中,是已经做了这个判断了:
如果正在动画,则返回
而说是在touchstart调用preventDefault,此处已经是这么做的了:
/** * 滑动日期选择器触屏事件 * @param {Object} event 事件对象 * @return {undefined} */ handleContentTouch(event) { event.preventDefault(); if (this.animating) return; if (event.type === ‘touchstart’) { this.handleStart(event); } else if (event.type === ‘touchmove’) { this.handleMove(event); } else if (event.type === ‘touchend’) { this.handleEnd(event); } } |
移动端的touch事件处理 – 目田 – SegmentFault
“touchmove中执行e.preventDefault() 事件 会报这个错误
你这个问题我也遇到过,在chrome中手机模式下。但是第二天再看就好了,感觉很诡异/(ㄒoㄒ)/”
移动前端阻止触摸滑动事件冒泡,一个节点可滑动而不影响它的父节点? – 知乎
overflow:scroll
-webkit-overflow-scrolling:touch;
Unable to scroll toolbar menu items or show contextual links on mobile browsers [#2551785] | Drupal.org
“The preventDefault() does not have an effect because this event gets fired when the user starts to touch-scroll, and preventDefault() can’t be used until the event (scrolling) finishes.”
-》所以,只是对于touchmove来说,不要调用preventDefault,就可以不会触发这个提示了?
但是之前另外一个picker中,也是这样的写法啊:
handleTouchMove (e) { e.preventDefault(); if (this.props.data.list.length <= 1) { return; } const pageY = e.nativeEvent.changedTouches[0].pageY; let value = parseInt(pageY – this.startY); const y = this.currentY + value; let style = `translate3d(0px, ${ y }px, 0px)`; this.setState({ style: { transform: style } }); } |
先去试试:
给touchend返回true
handleEnd(event) { // console.log(`handleEnd: this.animating=${this.animating},event=${event}`); const touchY = event.pageY || event.changedTouches[0].pageY; const dir = touchY – this.touchY; const direction = dir > 0 ? -1 : 1; this._moveToNext(direction); return true; } |
结果问题依旧。
去改为:
touchmove时不调用preventDefault
/** * 滑动日期选择器触屏事件 * @param {Object} event 事件对象 * @return {undefined} */ handleContentTouch(event) { // event.preventDefault(); if (this.animating) return; if (event.type === ‘touchstart’) { event.preventDefault(); this.handleStart(event); } else if (event.type === ‘touchmove’) { this.handleMove(event); } else if (event.type === ‘touchend’) { event.preventDefault(); this.handleEnd(event); } } |
结果:
问题依旧。滚动还是有警告出现。
但是滚动的问题有所改善:
虽然滚动还是时不时的无效,但是生效的比例感觉大了不少:
10次有5次是可以滚动了的感觉。
之前是10次能有1次滚动就不错了。
感觉是:
前好多次的滑动,都是没反应。
但是之后再滑动,基本上都是持续的可以生效,可以滚动的。
但是停止了一会后,就又无法滑动了。
然后反复这个过程。
【总结】
目前,对于滚动出现上述的警告,是没有解决掉。
不过对于滚动基本上不工作的问题,倒是有所缓解,从90%不工作到50%不工作。
转载请注明:在路上 » 【未解决】锤子M1L浏览器内核滑动选择日期时出现警告:chromium Ignored attempt to cancel a touchend event