fix click events on elements wrapped by link don't cancel link navigation (#3357)

fix click events on elements wrapped by link doesn't cancel link navigation

Author: MichaelWest22

src/htmx.js

@@ -2435,7 +2435,9 @@ var htmx = (function() {
       if (elt.form && elt.type === 'submit') {
         return true
       }
-      if (elt instanceof HTMLAnchorElement && elt.href &&
+      elt = elt.closest('a')
+      // @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine
+      if (elt && elt.href &&
         (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
         return true
       }

test/core/internals.js

@@ -107,6 +107,11 @@ describe('Core htmx internals Tests', function() {
     htmx._('shouldCancel')({ type: 'submit', target: anchorThatShouldNotCancel }, form).should.equal(false)
     htmx._('shouldCancel')({ type: 'click', target: divThatShouldNotCancel }, form).should.equal(false)
 
+    // check elements inside links getting click events should cancel parent links
+    var anchorWithButton = make("<a href='/foo'><button></button></a>")
+    htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton).should.equal(true)
+    htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton.firstChild).should.equal(true)
+
     form = make('<form id="f1">' +
         '<input id="insideInput" type="submit">' +
         '<button id="insideFormBtn"></button>' +

test/core/regressions.js

@@ -291,4 +291,46 @@ describe('Core htmx Regression Tests', function() {
 
     byId('datefield').click()
   })
+
+  it('a button clicked inside an htmx enabled link will prevent the link from navigating on click', function(done) {
+    var defaultPrevented = 'unset'
+    var link = make('<a href="/foo" hx-get="/foo"><button>test</button></a>')
+    var button = link.firstChild
+
+    htmx.on(link, 'click', function(evt) {
+      // we need to wait so the state of the evt is finalized
+      setTimeout(() => {
+        defaultPrevented = evt.defaultPrevented
+        try {
+          defaultPrevented.should.equal(true)
+          done()
+        } catch (err) {
+          done(err)
+        }
+      }, 0)
+    })
+
+    button.click()
+  })
+
+  it('a htmx enabled button clicked inside a link will prevent the link from navigating on click', function(done) {
+    var defaultPrevented = 'unset'
+    var link = make('<a href="/foo"><button hx-get="/foo">test</button></a>')
+    var button = link.firstChild
+
+    htmx.on(link, 'click', function(evt) {
+      // we need to wait so the state of the evt is finalized
+      setTimeout(() => {
+        defaultPrevented = evt.defaultPrevented
+        try {
+          defaultPrevented.should.equal(true)
+          done()
+        } catch (err) {
+          done(err)
+        }
+      }, 0)
+    })
+
+    button.click()
+  })
 })