Triggering a link if wrapped in an <em> tag

I am having an issue where a modal isn't triggering if it is wrapped in an <em> tag.
In my example, if you click in the "normal" font-style part of the link, it fires properly, if you click where the italics are, it won't.
Any ideas?
JS

$(function () {
  const openModals = [];
  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.target).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.target).attr('href')).show());
  });
  $(window).add('.close').click(e => {
    e.stopPropagation();
    if ($(e.target).is('.modal, .close')) {
      const closing = openModals.pop().addClass('modal-content-active');
      setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
      if (openModals.length > 0) {
        openModals[openModals.length - 1].removeClass('open');
      } else $('body').removeClass('open');
    }
  });
});

Code (JavaScript):

FIDDLE
https://jsfiddle.net/postcolonialboy/h70bkej9/30/

 

by changing `e.target` to `e.currentTarget` , it worked.

JavaScript:

  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.currentTarget).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.currentTarget).attr('href')).show());
  });

Code (markup):

 

I'm just wondering why you're wasting JavaScript on something that's not even JS' job anymore. either:

<a href="#myModal">Open Modal</a>

and use #myModal:target in the CSS to trigger its view, with <a href="#">X</a> to close it, or:

<label for="toggle_myModal">Open Modal</label>

and use

<input type="checkbox" id="toggle_myModal" class="toggle" hidden>
<div id="myModal">

So that:

.toggle:checked + div {

can be used to display it, with another <label for="toggle_myModal">X</label> to close it.

NOT even JavaScript's job anymore, much less the train wreck of developer ignorance, incompetence, and ineptitude that is jQuery. The ONLY thing you can learn from jQuery is how NOT to write JavaScript.