Add x-on:.capture modifier

packages/alpinejs/src/utils/on.js

@@ -15,6 +15,7 @@ export default function on (el, event, modifiers, callback) {
     if (modifiers.includes("dot")) event = dotSyntax(event)
     if (modifiers.includes('camel')) event = camelCase(event)
     if (modifiers.includes('passive')) options.passive = true
+    if (modifiers.includes('capture')) options.capture = true
     if (modifiers.includes('window')) listenerTarget = window
     if (modifiers.includes('document')) listenerTarget = document
     if (modifiers.includes('prevent')) handler = wrapHandler(handler, (next, e) => { e.preventDefault(); next(e) })

tests/cypress/integration/directives/x-on.spec.js

@@ -97,6 +97,22 @@ test('.stop modifier',
     }
 )
 
+test.only('.capture modifier',
+    html`
+        <div x-data="{ foo: 'bar' }">
+            <button @click.capture="foo = 'baz'">
+                <h1>h1</h1>
+                <h2 @click="foo = 'bob'">h2</h2>
+            </button>
+        </div>
+    `,
+    ({ get }) => {
+        get('div').should(haveData('foo', 'bar'))
+        get('h2').click()
+        get('div').should(haveData('foo', 'bob'))
+    }
+)
+
 test('.self modifier',
     html`
         <div x-data="{ foo: 'bar' }">