javascript - 如果包含在 <em> 标签中则触发链接

Question

我遇到一个问题，如果模态包裹在标签中，它就不会触发。 在我的示例中，如果您单击链接的“正常”字体样式部分，它会正确触发，如果您单击斜体部分，则不会。

有什么想法吗？

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');
    }
  });
});

FIDDLE

Answer 1

在第一个事件处理程序中，您引用的是“target”而不是“currentTarget”

e.target代表被点击的确切元素 - 在你的例子中是 <em/> - 同时 e.currentTarget表示 事件处理程序附加到 的元素，这是您的 href 所在的位置值(value)是。

我会将两个引用更改为 e.target在第一个事件处理程序中为 e.currentTarget一切都应该按预期工作。

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

https://jsfiddle.net/q7o6f9su/