光球层上的黑子 2022-02-04 13:26 采纳率: 75%
浏览 53
已结题

Vue挂载点的click事件无效

本来是在学习事件修饰符
实操时发现如这样的写法是无法触发father节点的click事件的:

<body>
    <div id="father" @click="alertFather"  >
          father
          <div id="son" @click="alertChild">
            son
          </div>
      </div>
    <script>
        const msg={
            methods: {
              alertChild(){
                alert("child")
              },
              alertFather(){
                alert("Father")
              }
            }
        }
        Vue.createApp(msg).mount("#father")
    </script>
</body>

点击外层没有触发事件,点击内层只会调用一次alertChild。
打开控制台发现<div id="father" @click="alertFather" >并没有被vue渲染

假如我再嵌套一层div,将外层的click事件放在中间层的div上,就可以正常运行:

<body>
    <div id="father"   >
      <div @click="alertFather">
          father
          <div id="son" @click="alertChild">
            son
          </div>
      </div>
    </div>
    <script>
        const msg={
            methods: {
              alertChild(){
                alert("child")
              },
              alertFather(){
                alert("Father")
              }
            }
        }
        Vue.createApp(msg).mount("#father")
    </script>
</body>

似乎不能再挂载点添加事件,这是为什么?

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-02-05 21:05
    关注

    加个.stop

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月6日
  • 已采纳回答 2月26日
  • 创建了问题 2月4日

悬赏问题

  • ¥500 亚马逊 COOKIE我如何才能实现 登录一个亚马逊账户 下发新 COOKIE ..我使用下发新COOKIE 导入ADS 指纹浏览器登录,我把账户密码 修改过后,原来下发新COOKIE 不会失效的方式
  • ¥20 玩游戏gpu和cpu利用率特别低,玩游戏卡顿
  • ¥25 oracle中的正则匹配
  • ¥15 关于#vscode#的问题:把软件卸载不会再出现蓝屏
  • ¥15 vimplus出现的错误
  • ¥15 usb无线网卡转typec口
  • ¥30 怎么使用AVL fire ESE软件自带的优化模式来优化设计Soot和NOx?
  • ¥15 Ubuntu20.04.4.LTS系统如何下载安装VirtualBox虚拟机?
  • ¥15 如何用QDomDocument读取内容为空格的xml数据
  • ¥15 请阅读下面代码,帮我修改下代码