我有一个分为3个部分的页面 . 带有多个按钮的顶部栏,一个大的中间部分和一个带有更多按钮的底部栏 . 并且在所有几个浮动窗口之上,根据点击的按钮打开和关闭(可忽略此问题) .
请求的结构是中间部分必须是空的 div
,它将通过jquery加载其他几个页面 . 其中一些页面具有交互元素,因此它必须接受 mouse events
,尽管div具有所有页面元素中最低的 z-index
.
顶部和底部栏上的按钮都必须是 svg
元素,这两个元素都是因为矢量属性和偶尔的奇怪形状 . 并且他们必须始终比中间div更高 z-index
.
我的问题是svg覆盖了中间div并阻止了所有交互(在这种情况下,当你单击div时是一个简单的警报),尽管没有任何视觉元素重叠 .
我've tried to call 2 different svgs, one for each bar, but the 2nd never shows up. I'也尝试在主svg中调用2个svgs并将div包含在内部,但它也没有用 .
这是它当前的外观示例(绝对位置,z索引和样式在css中定义):
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="topBar" class="topBar" x="0" y="0">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<svg id="bottomBar" class="bottomBar" x="0" y="500">
<rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
</svg>
这是第一次尝试解决方案:
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg id="topBar" class="topBar" x="0" y="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<svg id="bottomBar" class="bottomBar" x="0" y="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
这是第二次尝试解决方案:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="topBar" class="topBar" x="0" y="0">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg id="bottomBar" class="bottomBar" x="0" y="500">
<rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
</svg>
1 回答
首先,您应该为
<svg>
元素指定width和height属性 . 如果您使用的是Chrome,则如果省略此类属性,则会错误地将其设置为页面大小,这可能是您的整个问题 .如果这不起作用,则添加pointer-events = "none"以防止
<svg>
元素拦截鼠标单击 .