请选择 进入手机版 | 继续访问电脑版

[问题求助] ontouchstart IOS无法获取e.currentTarget.dataset

[复制链接]
Not Foundcl 发表于 2022-1-7 14:26:38
本帖最后由 Not Foundcl 于 2022-1-7 14:33 编辑

ontouchstart IOS无法获取e.currentTarget.dataset,安卓可以。以下是测试代码:
<template name='tpl'>
    <view class="page">
        <safe-area>
            <view class="top">
                <text class="topsize">测试</text>
            </view>
            <view class="box">
                <view class="list" v-for="(item,index) in  list" ontouchstart="ontouchstart" ontouchend="ontouchend"
                    :data-i="index">
                    <view class="lidt">
                        <text class="item">{item}</text>
                        <view class="delete" v-show="left&&num==index" @click="delete(index)">
                            <text>删除</text>
                        </view>
                    </view>
                </view>
            </view>
        </safe-area>
    </view>
</template>
<script>
export default {
    name: 'tpl',
    apiready() {//like created

    },
    data() {
        return {
            list: ['列表一', '列表二', '列表三', '列表四'],
            startX: '',
            left: false,
            num: '',
        }
    },
    methods: {
        ontouchstart(e) {
            this.data.num = -1
            // 触摸开始事件,获取初始的手指触碰(点击)位于屏幕的x轴的坐标值,复制给startX
            this.data.startX = e.detail.x
            console.log('开始=' + JSON.stringify(e));
        },
        ontouchend(e) {
            //  触摸结束事件,获取结束的手指触碰(点击)位于屏幕的x轴的坐标值,与startX进行比较,
            // 小于startX表示左滑,反之右滑,
            console.log('结束=' + JSON.stringify(e));
            // 获取data-i的值(索引)赋给num
            this.data.num = e.dataset.i
            if (this.data.startX > e.detail.x) {
                console.log('左滑');
                this.data.left = true
            } else {
                console.log('右滑');
                this.data.left = false
            }
        },
        delete(index) {
            this.data.num = ''
            this.data.left = false
            this.data.list.splice(index, 1)
        }

    }
}
</script>
<style>
.page {
    height: 100%;
}
.top {
    width: 100%;
    height: 40px;
    background-color: dodgerblue;
}
.topsize {
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}
.box {
    height: 500px;
    background: darkgray;
    padding: 12px;
}
.list {
    height: 40px;
    background: rgb(32, 17, 17);
    margin-bottom: 20px;
}
.lidt {
    height: 40px;
    background: rgb(240, 238, 238);
    /* margin-right:20px ; */
}
.delete {
    width: 80px;
    height: 40px;
    background-color: red;
    position: absolute;
    top: 0;
    right: 0;
}
</style>







安卓的:
[2022-1-7 14:17:6][[color=#**.**] 开始={"detail":{"x":159.38,"y":101.93},"dataset":{"i":0},"type":"touchstart","target":{"id":"o10","type":"view","attributes":{"data-i":0,"class":"list","style":{}},"events":["touchstart","touchend","longpress"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"currentTarget":{"id":"o10","type":"view","attributes":{"data-i":0,"class":"list","style":{}},"events":["touchstart","touchend","longpress"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]}} at column-study/study.js:24:12
[2022-1-7 14:17:7][[color=#**.**
] 结束={"detail":{"x":159.38,"y":101.93},"dataset":{"i":0},"type":"touchend","target":{"id":"o10","type":"view","attributes":{"data-i":0,"class":"list","style":{}},"events":["touchstart","touchend","longpress"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"currentTarget":{"id":"o10","type":"view","attributes":{"data-i":0,"class":"list","style":{}},"events":["touchstart","touchend","longpress"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]}} at column-study/study.js:29:12



IOS的:
开始={"currentTarget":{"id":"o10","type":"view","attributes":{"class":"list","data-i":0,"style":{}},"events":["touchstart","touchend"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"detail":{"x":314,"y":115},"touches":[{"clientX":314.3333282470703,"clientY":115.66665649414062,"pageY":115.66665649414062,"identifier":0,"pageX":314.3333282470703}],"target":{"id":"o10","type":"view","attributes":{"class":"list","data-i":0,"style":{}},"events":["touchstart","touchend"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"changedTouches":[{"clientX":314.3333282470703,"clientY":115.66665649414062,"pageY":115.66665649414062,"identifier":0,"pageX":314.3333282470703}],"type":"touchstart"}
[2022-1-7 14:23:47][[color=#**.**
] 结束={"currentTarget":{"id":"o10","type":"view","attributes":{"class":"list","data-i":0,"style":{}},"events":["touchstart","touchend"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"detail":{"x":202,"y":123},"touches":[{"clientX":202,"clientY":123.33332824707031,"pageY":123.33332824707031,"identifier":0,"pageX":202}],"target":{"id":"o10","type":"view","attributes":{"class":"list","data-i":0,"style":{}},"events":["touchstart","touchend"],"children":[{"id":"o11","type":"view","attributes":{"class":"lidt","style":{}},"children":[{"id":"o12","type":"text","attributes":{"text":"列表一","class":"item","style":{}},"children":[{"id":"o13","type":"#text","attributes":{"style":{}}}]},{"id":"o14","type":"view","attributes":{"class":"delete","style":{"display":"none"}},"events":["click"],"children":[{"id":"o15","type":"text","attributes":{"text":"删除","style":{}},"children":[{"id":"o16","type":"#text","attributes":{"style":{}}}]}]}]}]},"changedTouches":[{"clientX":202,"clientY":123.33332824707031,"pageY":123.33332824707031,"identifier":0,"pageX":202}],"type":"touchend"}



5条回复

技术咨询-Kenny 管理员 7696Y币
你直接取值用就行了,不要看打印的东西,或者直接打印 e.currentTarget.dataset。
Not Foundcl 马路杀手 502Y币
安卓e.currentTarget.dataset打印是有的,IOS没有
技术咨询-Kenny · 2022-1-7 14:54你直接取值用就行了,不要看打印的东西,或者直接打印 e.currentTarget.dataset。
技术咨询-Kenny 管理员 7696Y币
console.log(JSON.stringify(e.currentTarget.dataset));
Not Foundcl · 2022-1-7 15:05安卓e.currentTarget.dataset打印是有的,IOS没有
技术咨询-Kenny 管理员 7696Y币
好好看下,安卓打印出来 e.currentTarget 下面也是没有 dataset 字段的,你看到的 dataset 是放在 e 下面的。

currentTarget 是一个 dom 对象,不是标准的 JSON 对象,用 JSON.stringify 序列化成字符串时一些属性是无法被序列化的,所以会看不到,但是不影响直接 e.currentTarget.dataset.i 这样取值使用。
Not Foundcl · 2022-1-7 15:05安卓e.currentTarget.dataset打印是有的,IOS没有

Not Foundcl 马路杀手 502Y币
好的,明白,感谢
技术咨询-Kenny · 2022-1-7 16:48好好看下,安卓打印出来 e.currentTarget 下面也是没有 dataset 字段的,你看到的 dataset 是放在 e 下面的。

currentTarget 是一个 dom 对象,不是标准的 JSON 对象,用 JSON.stringify 序列化成字符串时一些属性 ...
您需要登录后才可以回帖 登录

本版积分规则