我有以下 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
。
最佳答案
你的问题是 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>
关于javascript - 如何允许 svg 在链接中可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52955873/