子元素不继承父元素中的点击事件

如下图一行表格中有两个点击事件:

1. 点击某一行时,需要跳转页面跳转;

2. 点击删除按钮时,删除该行;

当我点击删除按钮后,不仅触发了自己的点击事件,也跳转了页面。

原因:这是由于子元素继承了父元素身上的方法。

解决方法:给子元素也就是图中的删除按钮给一个  event.stopPropagation() 的方法,来阻止事件冒泡就OK了。这样就不会相互影响了。

后续补充:

在vue中我们可以直接给点击事件一个stop修饰符就可以解决:

eg:@click.stop="hlandClick()"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,555评论 1 11
  • 点击子元素触发父元素 点击 这是父元素里面的其他内容 methods:{ fu(){ consol...
    Light_shallow阅读 13,428评论 0 1
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,430评论 0 2
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,628评论 0 17
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,613评论 0 7