正做一个 web 端用户自选组件生成移动端页面的功能,求一个监听鼠标点击位置的最佳实现方法?

2022-02-14 17:08:22 +08:00
 TomatoYuyuko

大致就是页面上用户加了一大堆组件进去,然后每一个组件相互独立,现在我要鼠标点击各个组件,右侧会展示组件的详情。 问题是,如果是给每个组件都绑个监听事件有点笨(虽然能用),有没有更聪明的实现方法?

958 次点击
所在节点    问与答
10 条回复
renmu123
2022-02-14 17:12:21 +08:00
你这个没有意义啊,两个组件还会重叠呢,绑监听事件不香吗
TomatoYuyuko
2022-02-14 17:13:32 +08:00
@renmu123 没错,确实会有这种情况,如果没有更好的方法实现就只能挨个绑了
Danswerme
2022-02-14 23:16:53 +08:00
组件是纯展示组件还是里面有多个交互? 纯展示的话可以在这堆组件的父容器上用事件代理,然后把每个组件的唯一标识绑定到 dataset 上,点击后拿相应的信息。我弄了个 DEMO ,你看看。

https://codesandbox.io/s/musing-grass-9t2uz
Gaays
2022-02-15 09:11:05 +08:00
估计是低代码那种?点击后右边显示相应配置项信息?可以把唯一标识符绑定到 class 或 id 上,点击组件获取唯一标识符到配置项数组里面找配置项数据然后渲染显示
TomatoYuyuko
2022-02-15 10:30:19 +08:00
@Danswerme 有交互,每个组件的有编辑和预览,不过用 dataset 确实是个办法,我试一下
TomatoYuyuko
2022-02-15 10:32:50 +08:00
@Danswerme emmm 是不行的,交互比较复杂,有轮播还有上传视频点击播放预览之类的功能
TomatoYuyuko
2022-02-15 10:33:57 +08:00
@Gaays 组件纯展示是没问题,但有复杂交互的,没法把整个组件识别为一个整体
Gaays
2022-02-15 10:48:09 +08:00
@TomatoYuyuko 按照你说的组件内部还有复杂功能,你的意思点击到组件内的标签获取不到这个标识符?那这样你看是否符合
1.组件最外层设置 id:xx
2.全局监听 click ,查看点击对象的 id 有无指定值,递归查找 parentNode
TomatoYuyuko
2022-02-15 10:59:17 +08:00
@Gaays 是的没错 按照这个思路继续的话,就需要递归查询元素直到拿到 id 为止了
asiasky
2022-02-16 10:17:57 +08:00
如果你不是用原生写的,没必要去做事件委托和递归处理,只要在组件的层面上拦截到冒泡就可以了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/833818

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX