Question

我有一个自定义甘特图，上面有一个条形图和一个标签。图表的条形图是小div的组合，条形图的标签放在第一个div中。

我已经创建了一个粗略的版本来模拟这里jsfiddle。我认为问题是由于指针事件：无; IE不支持。我在CSS中为标签

设置了以下属性

<html>
<head>

<style>
.mylabel {
     pointer-events: none;
    left: 40px;
    position: absolute;  
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
}
.rowDiv {
    float:left;
    width:30px;
    height:30px;    
    z-index: -1;
} 

</style>
</head>

<script>
function div1Click(){alert("Div1 clicked");}
function div2Click(){alert("Div2 clicked");}
function div3Click(){alert("Div3 clicked");}
</script>



<body>
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()"><label class="mylabel" >DiV 123</label></div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
</body>

</html>

在点击每个div时，它应该打开一个对应于该div的弹出窗口。然而，第一个div的标签跨越所有其他div。当我点击div 2或div 3中任意位置的标签时，会触发第一个div的点击事件而不是div 2或Div 3.

此问题仅存在于IE 10中，并且在Chrome中运行良好。

有没有办法在IE 10中使这项工作。

提前致谢

Answer 1

Pointer events were introduced in IE11，因此不会在10或以下工作。

查看click-through-a-div-to-underlying-elements了解其他一些观点

如何点击标签？

1 个答案: