Add support for event cancellation (preventDefault) in extensions (#1456)

ext: add support for event cancellation via preventDefault()

2 files changed, 43 insertions, 0 deletions

diff --git a/test/core/extensions.js b/test/core/extensions.js
new file mode 100644
index 00000000..2bcfe208
--- /dev/null
+++ b/test/core/extensions.js
@@ -0,0 +1,42 @@
+describe('Core htmx extension tests', function() {
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function() {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('should support event cancellation by returning false', function() {
+        htmx.defineExtension('ext-prevent-request', {
+            onEvent: function(name, evt) {
+                if (name === 'htmx:beforeRequest') {
+                    return false;
+                }
+            }
+        });
+
+        this.server.respondWith('GET', '/test', 'clicked!');
+        var div = make('<div hx-get="/test" hx-ext="ext-prevent-request">Click Me!</div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal('Click Me!');
+    });
+
+    it('should support event cancellation with preventDefault', function() {
+        htmx.defineExtension('ext-prevent-request', {
+            onEvent: function(name, evt) {
+                if (name === 'htmx:beforeRequest') {
+                    evt.preventDefault();
+                }
+            }
+        });
+
+        this.server.respondWith('GET', '/test', 'clicked!');
+        var div = make('<div hx-get="/test" hx-ext="ext-prevent-request">Click Me!</div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal('Click Me!');
+    });
+});
diff --git a/test/index.html b/test/index.html
index f747775b..ea49d60f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -54,6 +54,7 @@
 <script src="core/internals.js"></script>
 <script src="core/api.js"></script>
 <script src="core/ajax.js"></script>
+<script src="core/extensions.js"></script>
 <script src="core/verbs.js"></script>
 <script src="core/parameters.js"></script>
 <script src="core/headers.js"></script>