前端事件可穿透与禁止穿透

本文介绍: 如何处理偶然出现的事件透传问题？如何为了美观UI而允许事件透传？一文告诉你如何快速解决问题。

在开发过程中遇到一些问题，就是在一个弹窗上面有对应的输入框，在输入框中输入空格，然后其他绑定全局的空格事件就被触发了，也就是把弹窗下面的事件被触发了，那么如何有效的阻止事件的事件透传触发呢？很简单就是提供对应事件的.stop就行了。

比如我是弹窗的键盘事件，那么我就在modal上面增加@keydown.space.stop。

.stop事件修饰符就是封装了 event.stopPropagation()的逻辑在里面，也就是快速帮助你去阻止冒泡。

&lt;n-modal
    :show="visible"
    :display-directive="displayDirective"
    :style="$props.largeSize &amp;&amp; { height: '900px' }"
    :auto-focus="autoFocus"
    :mask-closable="maskClosable"
    :unstable-show-mask="showMask"
    @update:show="$emit('update:visible', false)"
    // 阻止keydown事件冒泡
    @keydown.space.stop
    // 阻止keyup事件冒泡
    @keyup.space.stop
  &gt;
  //....弹窗内容
&lt;/n-modal&gt;

当然还有一些其他事件修饰符比如.prevent、.space、.shift等等，更多的内容查看 vue3事件部分。

简单看下Vue3部分的源码吧。

// 声明拦截的描述符（其中就包括我们刚刚使用的stop,其实就是执行了一句e.stopPropagation())
const modifierGuards: Record<
  string,
  (e: Event, modifiers: string[]) =&gt; void | boolean
&gt; = {
  stop: e => e.stopPropagation(),
  prevent: e => e.preventDefault(),
  self: e => e.target !== e.currentTarget,
  ctrl: e => !(e as KeyedEvent).ctrlKey,
  shift: e => !(e as KeyedEvent).shiftKey,
  alt: e => !(e as KeyedEvent).altKey,
  meta: e => !(e as KeyedEvent).metaKey,
  left: e => 'button' in e &amp;&amp; (e as MouseEvent).button !== 0,
  middle: e => 'button' in e &amp;&amp; (e as MouseEvent).button !== 1,
  right: e => 'button' in e &amp;&amp; (e as MouseEvent).button !== 2,
  exact: (e, modifiers) =>
    systemModifiers.some(m => (e as any)[`${m}Key`] &amp;&amp; !modifiers.includes(m))
}
export const withModifiers = (fn: Function, modifiers: string[]) => {
  return (event: Event, ...args: unknown[]) => {
    for (let i = 0; i < modifiers.length; i++) {
      const guard = modifierGuards[modifiers[i]]
      // 拦截到对应的描述符，然后先执行
      if (guard &amp;&amp; guard(event, modifiers)) return
    }
    return fn(event, ...args)
  }
}

如果用 JS 的话，直接就使用e.stopPropagation()就行。

//html
<button class="button">关闭</button>
const button = document.querySelector('[class=button]');
button.onClick = (e) => {
  e.stopPropagation();
  // ...
}

还有一种情况就是，设计非要把蒙层放在最上层，明明遮住了按钮，他不管，他就觉得这么放好看，那怎么办？好在前端足够强大，能够解决这个问题，就是css中的一个pointer-events

请添加图片描述

除了none/auto以外，其他都是用在svg 项目中。

<!DOCTYPE html>
<html>
<head>
  <title>阻止点击穿透/实现点击穿透</title>
  <style>
    .parent{
      width: 300px;
      height: 150px;
      padding: 20px;
      margin: 20px;
      background: #fff;
    }
    .child{
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      background: red;
      text-align: center;
      color: #fff;
    }
    .non-click{
      pointer-events: none;  /* 上层加上这句样式可以实现点击穿透 */
    }
  </style>
</head>
<body>

  <div class="parent" οnclick="parent()">
    <p>阻止点击穿透</p>
    <div class="child" οnclick="child()">试试</div>
  </div>

  <div class="parent" οnclick="parent()">
    <p>点击穿透</p>
    <div class="child non-click" οnclick="child()">试试</div>
  </div>
  <script>
    const parent = function() {
      alert("点击下层")
    }
    const child = function() {
      event.stopPropagation();    // 上层加上这行代码，可以阻止点击穿透
      alert("点击上层")
    }
  </script>
</body>
</html>