正做一个 web 端用户自选组件生成移动端页面的功能，求一个监听鼠标点击位置的最佳实现方法？
TomatoYuyuko · 2022-02-14 17:08:22 +08:00 · 952 次点击这是一个创建于 1003 天前的主题，其中的信息可能已经有所发展或是发生改变。
大致就是页面上用户加了一大堆组件进去，然后每一个组件相互独立，现在我要鼠标点击各个组件，右侧会展示组件的详情。 问题是，如果是给每个组件都绑个监听事件有点笨（虽然能用），有没有更聪明的实现方法？
 |
1
renmu123 2022-02-14 17:12:21 +08:00 via Android
你这个没有意义啊，两个组件还会重叠呢，绑监听事件不香吗
|
 |
2
TomatoYuyuko OP @renmu123 没错，确实会有这种情况，如果没有更好的方法实现就只能挨个绑了
|
 |
3
Danswerme 2022-02-14 23:16:53 +08:00  1
组件是纯展示组件还是里面有多个交互？ 纯展示的话可以在这堆组件的父容器上用事件代理，然后把每个组件的唯一标识绑定到 dataset 上，点击后拿相应的信息。我弄了个 DEMO ，你看看。
https://codesandbox.io/s/musing-grass-9t2uz |
 |
4
Gaays 2022-02-15 09:11:05 +08:00
估计是低代码那种？点击后右边显示相应配置项信息？可以把唯一标识符绑定到 class 或 id 上，点击组件获取唯一标识符到配置项数组里面找配置项数据然后渲染显示
|
|
5
TomatoYuyuko OP @Danswerme 有交互，每个组件的有编辑和预览，不过用 dataset 确实是个办法，我试一下
|
|
6
TomatoYuyuko OP @Danswerme emmm 是不行的，交互比较复杂，有轮播还有上传视频点击播放预览之类的功能
|
|
7
TomatoYuyuko OP @Gaays 组件纯展示是没问题，但有复杂交互的，没法把整个组件识别为一个整体
|
|
8
Gaays 2022-02-15 10:48:09 +08:00 1
@TomatoYuyuko 按照你说的组件内部还有复杂功能，你的意思点击到组件内的标签获取不到这个标识符？那这样你看是否符合
1.组件最外层设置 id：xx 2.全局监听 click ，查看点击对象的 id 有无指定值，递归查找 parentNode |
|
9
TomatoYuyuko OP @Gaays 是的没错 按照这个思路继续的话，就需要递归查询元素直到拿到 id 为止了
|
 |
10
asiasky 2022-02-16 10:17:57 +08:00
如果你不是用原生写的,没必要去做事件委托和递归处理,只要在组件的层面上拦截到冒泡就可以了
|
Select Language