javascript - 如何允许 svg 在链接中可点击

Question

我有以下 html:

<a class="delete show-modal" href="#;">
    <svg x="0px" y="0px" width="12px" height="12px" viewBox="0 0 10 10" focusable="false"><polygon class="a-s-fa-Ha-pa" fill="#969696" points="10,1.01 8.99,0 5,3.99 1.01,0 0,1.01 3.99,5 0,8.99 1.01,10 5,6.01 8.99,10 10,8.99 6.01,5 "></polygon></svg>
</a>

目前，我无法单击链接来触发弹出显示。有没有办法在不使用 javascript 的情况下使 svg 成为“链接文本”的一部分(例如，仅使用 css 或更改 html)，或者我可以在这里做什么？

此外，这是我触发弹出窗口的方式:

$(document).on('click', function(e) {

    var clickedElement = $(e.target);
    $this = clickedElement;
    if ($this.hasClass('show-modal')) {

        ...
    }

});

换句话说，我相信弹出窗口没有被触发，因为点击的元素显示为 svg 而不是 a。

Answer 1

你的问题是 svg 是点击的目标，它没有你正在寻找的类。要解决此问题，您可以将 show-modal 类添加到 anchor 内的所有元素，或者简单地添加此 CSS:

.show-modal *{
  pointer-events: none;
}

pointer-events CSS 属性设置在什么情况下(如果有的话)特定图形元素可以成为鼠标事件的目标。这是有关 pointer-events 的更多信息.

看这个片段:

$(document).on('click', function(e) {
  var clickedElement = $(e.target);
  $this = clickedElement;
  if ($this.hasClass('show-modal')) {
    alert('it got clicked');
  }
});

.show-modal * {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="delete show-modal" href="#;">
  <svg x="0px" y="0px" width="12px" height="12px" viewBox="0 0 10 10" focusable="false"><polygon class="a-s-fa-Ha-pa" fill="#969696" points="10,1.01 8.99,0 5,3.99 1.01,0 0,1.01 3.99,5 0,8.99 1.01,10 5,6.01 8.99,10 10,8.99 6.01,5 "></polygon></svg>
</a>