【发布时间】：2017-09-21 16:56:40
【问题描述】：
我有这个页面，上面有 2 张 svg 图片。 似乎 svg (item1) 图像重叠并阻止点击底层 svg (item2)
我尝试在元素上使用指针事件，但我似乎无法让它在底层 item2 上工作。
也许 de svg 仍在阻止“点击事件”
这是代码：
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<body>
<div id="main">
<div id="item1">
<svg class="crossSvg">
<line class="verticalLine" x1="50%" y1="0" x2="50%" y2="100%"></line>
<line class="horizontalLine" x1="0" y1="50%" x2="100%" y2="50%"></line>
<rect class="itemSquare" x="50%" y="50%" width="10" height="10" transform="translate(-5,-5)"/>
<text class="itemTitle" x="50%" y="50%" transform="translate(10,-10)">item1</text>
</svg>
<svg class="closeSvg">
<rect class="closeSquare" x="0" y="0" width="10" height="10"/>
<line x1="90%" y1="50%" x2="91%" y2="51%"></line>
</svg>
</div>
<div id="item2">
<svg class="crossSvg">
<line class="verticalLine" x1="50%" y1="0" x2="50%" y2="100%"></line>
<line class="horizontalLine" x1="0" y1="50%" x2="100%" y2="50%"></line>
<rect class="itemSquare" x="50%" y="50%" width="10" height="10" transform="translate(-5,-5)"/>
<text class="itemTitle" x="50%" y="50%" transform="translate(10,-10)">item2</text>
</svg>
<svg class="closeSvg">
<rect class="closeSquare" x="0" y="0" width="10" height="10"/>
<line x1="90%" y1="50%" x2="91%" y2="51%"></line>
</svg>
</div>
</div>
</body>
JAVASCRIPT：
$( document ).ready(function() {
$('.itemSquare').on('click', function(){
alert("Hello! I am an alert box!!");
});
});
CSS：
#main{
width: 100vw;
height: 100vh;
}
#item1, #item2{
position: absolute;
width: 200vw;
height: 200vh;
}
/* ---- positioning items ---- */
#item1{
left: -90vw;
top: -80vh;
z-index:100;
}
#item2{
left: -50vw;
top: -70vh;
}
/* ---- item content ---- */
.itemContent{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 90vw;
overflow: hidden;
padding: 5px;
}
/* ---- SVG's ----- */
.crossSvg{
position: absolute;
width: 100%;
height: 100%;
background: none;
pointer-events: all;
}
.verticalLine, .horizontalLine {
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
.itemSquare{
display: hidden;
fill: black;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
pointer-events: fill;
}
.closeSvg{
position: absolute;
top: 50%;
left: 95%;
margin-top: -5px;
}
.closeSquare{
fill: black;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
我把这个放在这个小提琴中： https://jsfiddle.net/fme21qx9/3/
【问题讨论】：
-
你是 100% 正确的，你不能点击底层 svg。
-
@skobaljic 我知道，但为什么不，我怎样才能让它工作......
-
你不能这样。您必须将单击事件绑定到某个父元素，然后从鼠标位置进行计算……或者根据需要使用 z-index 以某种方式重新排序您的 SVG（例如：在 Photoshop 中选择图层）。浏览器无法知道您想要单击的 SVG（图层），因为它们都在另一个之上 - 所以它返回顶部。
-
@skobaljic 我已经读过，它可能不得不将 div 放在彼此之上，有背景，并让底层的一个接收点击事件......
-
developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 除了指示该元素不是鼠标事件的目标之外，值 none 还指示鼠标事件“穿过”该元素并以该元素“下方”的任何内容为目标.