时间戳

首页 > 解决方案 > 如何允许点击可见性的svg子元素：隐藏？

javascript - 如何允许点击可见性的svg子元素：隐藏？

问题描述

我有一个复杂的 SVG 图，它在 Edge 中一直存在渲染问题（图的某些部分以随机间隔闪烁、消失等。）我通过不断向父 div 添加和删除“可见性：隐藏”来修复它（某种程度上）。一旦布局中断，这将“修复”布局（但不会阻止它再次中断）。

隐藏到可见的变化发生得足够快，在视觉上没有区别，并且图表不会从页面上消失。

我的问题是用户需要单击图表以获取更多信息，并且如果在元素具有可见性时发生单击事件，则会错过单击事件：隐藏设置为它（即使它看起来是可见的）。

如何允许点击具有“可见性：隐藏”的元素？

这是一个小提琴：http: //jsfiddle.net/kmbgp95a/

主要涉及的 CSS：

.hidden {
    visibility:hidden
}

我试过使用 opacity: 0 但我仍然有同样的问题。

标签： javascriptjquerycsssvg

解决方案

您不能用鼠标单击隐藏的元素。您必须从代码触发点击事件或使用opacity属性：

$('.hidden').click(function() {
    alert('hidden was clicked');
});

$('div').click(function() {
    alert('div was clicked');
});
div {
    background-color:red;
    width:100px;
    height:100px;
}

.hidden {
    opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden"></div>
<div></div>

推荐阅读