V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomatoYuyuko
V2EX  ›  问与答

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

  •  
  •   TomatoYuyuko · 2022-02-14 17:08:22 +08:00 · 950 次点击
    这是一个创建于 997 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    https://codesandbox.io/s/musing-grass-9t2uz
    Gaays
        4
    Gaays  
       2022-02-15 09:11:05 +08:00
    估计是低代码那种?点击后右边显示相应配置项信息?可以把唯一标识符绑定到 class 或 id 上,点击组件获取唯一标识符到配置项数组里面找配置项数据然后渲染显示
    TomatoYuyuko
        5
    TomatoYuyuko  
    OP
       2022-02-15 10:30:19 +08:00
    @Danswerme 有交互,每个组件的有编辑和预览,不过用 dataset 确实是个办法,我试一下
    TomatoYuyuko
        6
    TomatoYuyuko  
    OP
       2022-02-15 10:32:50 +08:00
    @Danswerme emmm 是不行的,交互比较复杂,有轮播还有上传视频点击播放预览之类的功能
    TomatoYuyuko
        7
    TomatoYuyuko  
    OP
       2022-02-15 10:33:57 +08:00
    @Gaays 组件纯展示是没问题,但有复杂交互的,没法把整个组件识别为一个整体
    Gaays
        8
    Gaays  
       2022-02-15 10:48:09 +08:00   ❤️ 1
    @TomatoYuyuko 按照你说的组件内部还有复杂功能,你的意思点击到组件内的标签获取不到这个标识符?那这样你看是否符合
    1.组件最外层设置 id:xx
    2.全局监听 click ,查看点击对象的 id 有无指定值,递归查找 parentNode
    TomatoYuyuko
        9
    TomatoYuyuko  
    OP
       2022-02-15 10:59:17 +08:00
    @Gaays 是的没错 按照这个思路继续的话,就需要递归查询元素直到拿到 id 为止了
    asiasky
        10
    asiasky  
       2022-02-16 10:17:57 +08:00
    如果你不是用原生写的,没必要去做事件委托和递归处理,只要在组件的层面上拦截到冒泡就可以了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5043 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 03:51 · PVG 11:51 · LAX 19:51 · JFK 22:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.