| 实用

js冒的泡

前因

  • 在项目中，根据产品的要求，卡片元素整个区域开了一个热区

  • 但是在热区中有很多内容包括按钮图片等等

经过

  • 在实际开发中，按钮的点击事件会冒泡到父级的热区

  • 但按照期望，我们希望按钮的点击事件触发的内容和热区不同

结果

  • 使用w3c推荐的阻止冒泡的方案同时兼容IE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Button
  onClick={e => {
    const el = e || window.event;
    if (el.stopPropagation) {
      el.stopPropagation(); // w3c推荐阻止冒泡的方法
    } else {
      el.cancelBubble = true; // IE阻止冒泡
    }
    // 自定义处理的方法
    goToRePay();
  }}
  size="small"
  inline
  type="primary"
>
  重新购买
</Button>
ESC