Fatal编程技术网

Javascript 如何单击标签？

javascript html css

Javascript 如何单击标签？,javascript,html,css,Javascript,Html,Css,我有一个自定义甘特图，上面有一个条形图和一个标签。图表的条形图是小div的组合，条形图的标签位于第一个div中 我已经创建了一个粗略的版本来模拟这个问题；IE中不支持。我在CSS中为label设置了以下属性 <html> <head> <style> .mylabel { pointer-events: none; left: 40px; position: absolute; clear: both; disp

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

我已经创建了一个粗略的版本来模拟这个问题；IE中不支持。我在CSS中为label设置了以下属性

<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>


迈拉贝尔先生{
指针事件：无；
左：40px；
位置：绝对位置；
明确：两者皆有；
显示：内联块；
溢出：隐藏；
空白：nowrap；
z指数：2；
}
罗迪夫先生{
浮动：左；
宽度：30px；
高度：30px；
z指数：-1；
} 
函数div1Click（）{alert（“Div1单击”）；}
函数div2Click（）{alert（“Div2单击”）；}
函数div3Click（）{alert（“Div3已单击”）；}
第123分部
单击每个div时，它会打开一个对应于该div的弹出窗口。但是，来自第一个div的标签跨越所有其他div。当我在div 2或div 3中的任何位置单击标签时，会触发第一个div的单击事件，而不是div 2或div 3

这个问题只存在于IE10中，它在Chrome中运行良好

在IE 10中有什么方法可以实现这一点吗

提前感谢

，因此在10或以下的时间内不起作用

查看一些备选方案

您没有看到警告消息，您必须添加带有fiddle链接的代码吗？请尽可能安装适当的fiddle。