（9）svelte 教程： Event Modifiers

什么是 Event Modifiers

Event Modifiers 是 Svelte 框架中的一种特性，它允许你在绑定事件处理函数时，添加一些修饰符来修改事件的默认行为或事件流。通过这些修饰符，可以更简洁、更直观地控制事件的行为，而无需在事件处理函数中编写额外的代码。常见的 Event Modifiers 包括：

• preventDefault：阻止事件的默认行为。
• stopPropagation：阻止事件冒泡。
• self：仅在事件的目标素上触发事件处理函数，而不在其子素上触发。
• once：确保事件处理函数只执行一次。
• capture：在捕获阶段处理事件，而不是冒泡阶段。
• passive：提示浏览器事件处理程序不会调用 preventDefault，以便优化性能。

逐行解释代码

App.svelte

<script> import Modal from './Modal.svelte'; let showModal = false; let toggleModal = () => { showModal = !showModal; }; </script> 

• import Modal from './Modal.svelte';
  • 从当前目录中导入名为 Modal 的 Svelte 组件。
• let showModal = false;
  • 声明一个名为 showModal 的变量，初始值为 false。这个变量用于控制 Modal 组件的显示与隐藏。
• let toggleModal = () => { showModal = !showModal; };
  • 声明一个名为 toggleModal 的箭头函数。这个函数的作用是切换 showModal 的值，使其在 true 和 false 之间切换。

<Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} /> <main> <button on:click|once={toggleModal}>Open Modal</button> </main> 

• <Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />
  • 使用 Modal 组件，并传递三个属性：
    • message='Hello, Ninjas!'：向 Modal 组件传递一个名为 message 的字符串属性，值为 ‘Hello, Ninjas!’。
    • {showModal}：将 showModal 变量的当前值传递给 Modal 组件，使其能根据该值决定是否显示。
    • on:click={toggleModal}：监听 Modal 组件的 click 事件，当该事件触发时，调用 toggleModal 函数。
• <main> 和 <button on:click|once={toggleModal}>Open Modal</button>
  • 创建一个 main 素，并在其内部创建一个按钮。
  • on:click|once={toggleModal}：为按钮绑定 click 事件，并添加 once 修饰符。按钮时，调用 toggleModal 函数，且此函数只执行一次，按钮的事件处理器随后会自动移除。

Modal.svelte

<script> export let showModal = false; export let isPromo = false; export let message = 'default message'; </script> 

• export let showModal = false;
  • 声明并导出一个名为 showModal 的变量，初始值为 false。这个变量由外部（父组件）传入，用来控制 Modal 组件的显示与隐藏。
• export let isPromo = false;
  • 声明并导出一个名为 isPromo 的变量，初始值为 false。这个变量用来控制 Modal 组件是否具有 promo 样式。
• export let message = 'default message';
  • 声明并导出一个名为 message 的变量，初始值为 ‘default message’。这个变量用于显示传入的消息内容。

{#if showModal} <!-- svelte-ignore a11y-click-events-have-key-events --> <div class="backdrop" class:promo={isPromo} on:click|self> <div class="modal"> <p>{message}</p> </div> </div> {/if} 

• {#if showModal}
  • Svelte 的条件渲染语句。如果 showModal 为 true，则渲染内部的内容。
• <!-- svelte-ignore a11y-click-events-have-key-events -->
  • Svelte 的注释，忽略关于 a11y-click-events-have-key-events 的可访问性警告。
• <div class="backdrop" class:promo={isPromo} on:click|self>
  • 创建一个 div 素，类名为 backdrop，并根据 isPromo 的值动态添加 promo 类。
  • on:click|self：为 div 绑定 click 事件，并添加 self 修饰符。该修饰符确保只有在直接 div 素时才会触发事件处理函数，而不会在其子素上触发。
• <div class="modal">
  • 创建一个类名为 modal 的 div 素，用于显示模态框的内容。
• <p>{message}</p>
  • 创建一个 p 素，内容为 message 变量的值。

以上代码展示了如何在 Svelte 中使用 Event Modifiers 来简化事件处理，增强事件行为的控制。通过 once 修饰符，按钮的事件处理器只执行一次，而通过 self 修饰符，只有在模态框的背景时才会触发关闭事件。

App.svelte 完整代码

 <script> import Modal from './Modal.svelte'; let showModal = false; let toggleModal = () => { 
    showModal = !showModal; }; </script> <Modal message='Hello, Ninjas!' { 
   showModal} on:click={ 
   toggleModal} /> <main> <button on:click|once={ 
   toggleModal}>Open Modal</button> </main> <style> main { 
    text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } @media (min-width: 640px) { 
    main { 
    max-width: none; } } </style> 

Modal.svelte 完整代码

<script> export let showModal = false; export let isPromo = false; export let message = 'default message'; </script> { 
   #if showModal} <!-- svelte-ignore a11y-click-events-have-key-events --> <div class="backdrop" class:promo={ 
   isPromo} on:click|self> <div class="modal"> <p>{ 
   message}</p> </div> </div> { 
   /if} <style> .backdrop{ 
    width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.8); } .modal{ 
    padding: 10px; border-radius: 10px; max-width: 400px; margin: 10% auto;; text-align: center; background: white; } .promo .modal{ 
    background: crimson; color: white; } </style>