Problem/Motivation

If there are other libraries or Javascript code that are have click listeners, the footnote click event can bubble up the DOM tree and cause errors.

Steps to reproduce

My specific case was combining this with tocbot for a table of contents. tocbot's listener received the bubbled click event, it grabbed the link's href (#footnote-1), extracted the ID (footnote-1), and passed it to its function which was generating the table of contents. That function then ran document.getElementById('footnote-1'), which returned null and caused footnotes to stop working.

Proposed resolution

Prevent bubbling by adding event.stopPropagation(); to handleFootnoteCitationClick()

This change only affects click events on elements with the class .js-footnote-citation. It doesn't affect any other clicks on the page.

CommentFileSizeAuthor
#4 2025-11-25_05-28.png97.09 KBscott_euser

Issue fork footnotes-3556642

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sbrockwell created an issue. See original summary.

sbrockwell opened merge request !92

scott_euser’s picture

scott_euser commented
Status: Needs work » Needs review
scott_euser’s picture

scott_euser commented
StatusFileSize
new 2025-11-25_05-28.png97.09 KB

Thanks @sbrockwell I tested this out and think it might need to be an opt-in (so I added that). For example if GA (via GTM) is click tracking on body, this would prevent that click event from bubbling up to the body. So sites using the dialog that happen to be doing that (probably rare, but not impossible) could possibly have a regression?

If you agree, could you retest please with my changes? Thanks!

You'll have to enable this checkbox after you pull in the latest from the MR (or use patch of it):

Screenshot of new option added to the filter settings

scott_euser’s picture

scott_euser commented

@sbrockwell are the changes I made to your MR okay?

liam morland made their first commit to this issue’s fork.

rduterte’s picture

rduterte
Primary language Tagalog
Location PH
commented

Hi All,

I did some testing to replicate the issue. Using a simple HTML test page with a global click listener, I observed that clicking a .js-footnote-citation link causes the click event to bubble up to the global listener e.g document.addEventListener.

I applied this MR patch: https://git.drupalcode.org/project/footnotes/-/merge_requests/92.patch the event stops at the link and no longer reaches global listeners.

In my test, this resolved the issue and prevented errors. I hope this helps.

Happy to help test or review other issues as well!

scott_euser’s picture

scott_euser commented
Status: Needs review » Fixed

Thanks for confirming! Merged in

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.