2

如何改变所有按钮的点击行为？

 2 years ago
source link: https://ourai.ws/notes/1fk7fsof0/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

如何改变所有按钮的点击行为？

欧雷 发表于 1 天之前

0 条评论

被人问了这样一个问题——

现在有这样一个场景，所有的按钮（除了查询按钮），在点击的时候，如果该用户使用时间过期了，就要统一弹框提醒，不走按钮原有的方法了

算是一个项目组的某个前端

像这类「把所有……都……」的需求，需要一个汇总通道才能做，也就是说，所有分散的逻辑最终都会经过同一个点才能做管控，就像集散中心一样。

遇到这类需求，首先去想需求中涉及的点都可以通过什么进行汇总，然后在那个汇总的地方统一处理。这样就可使业务代码整洁、易懂，方便维护。

其实，这可以看作是面向切面编程（AOP）中的「切面」。

在页面加载完时给 body 加上 click 事件监听器，注意要在捕获阶段，这样可以比按钮本身的事件先执行。

在 click 事件触发后，从触发事件的元素开始沿 DOM 树向上查找代表「按钮」的节点，直到找到或到达 body 节点为止。

在找到代表「按钮」的节点以后，如果文本中包含「查询」就放行，否则检测用户时间是否过期。

function findButton(el) {
  // 向上递归查找
}

function isExpired() {
  // 判断是否过期
}

document.body.addEventListener('click', evt => {
  const button = findButton(evt.target);

  if (button && button.innerText.replaceAll(/\s+/g, '') !== '查询' && isExpired()) {
    alert('您已过期');

    evt.preventDefault();
    evt.stopPropagation();
  }
}, true);

Monkey patch

自定义一个按钮组件以替换原来的，针对 click 事件和子节点做判断，逻辑与上面的事件代理大体相同。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK