vue3中touchstart不起作用呢

李绅
  • 1
新手上路,请多包涵

最近为了学习vue3,自定义了一套ui组件库,在开发slider的时候要用到touch事件,但是失效了。难道touch事件只能在移动端才能起作用吗?

<template>
    <div class="sino-slider" ref="sinoSlider" @click="onSliderClick">
        <div class="sino-slider__bar" :style="barStyle">
            <div class="sino-slider__button-wrapper sino-slider__button-wrapper--right">
                <div class="sino-slider__button" @touchstart.native.prevent="onTouchStart"
                    @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd"></div>
            </div>
        </div>
    </div>
</template>
回复
阅读 321
2 个回答

touch 要在支持触屏的设备,pc 用 drag
试试这段代码,pc没反应,开发者工具切到移动端能打出log

 var el = document.querySelector("body");
 el.ontouchstart = function(){console.log(111)};

你排查bug思路有需要改进的地方,这东东到底是你的代码写得有问题,还是框架(vue3)的问题,还是touch事件的问题……
要尽可能精准地定位到问题在哪里,知道问题在哪,就很好改了 不然就是一片混沌
怎么精准定位呢,就是把可能有影响的因素一个一个测试排除掉
先写很简单的测试代码 看touch事件在pc正不正常
正常的话,再写很简单的vue3代码看touch在vue3里正不正常
前两步的代码只要测api能不能用就行了,尽可能精简,打个log就行,不要把业务代码混进来
如果前面都正常,那就是你的业务代码有问题了

vue3 移除了 native 吧。

你知道吗?

宣传栏