单击标签内的图像图标不会在 IE 上切换复选框状态答案

【问题标题】：Clicking on image icon inside label does not toggle checkbox state on IE单击标签内的图像图标不会在 IE 上切换复选框状态
【发布时间】：2015-04-28 10:27:00
【问题描述】：

我正在尝试使用表单输入复选框和带有图标的标签创建下拉菜单，因此当用户单击图标时，菜单会根据复选框的选中状态打开或关闭。

它适用于除 IE 之外的所有浏览器。有趣的是，如果我单击图标图像旁边标签内的文本，它会起作用，但在单击图像图标本身时就不行。

下面是此类菜单的一个最小示例。任何有关为什么这仅适用于 IE（甚至更新版本）的提示将不胜感激。

<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
	position: absolute;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	top: 40px;
}

#navigation-menu .menu-items {
	display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu ul span.drop-icon {
	display: inline;
}
</style>

</head>
<body>

<form>
 <div id="navigation-menu">
  <input type="checkbox" id="navigation-button">
  <div class="menu-items">
   <div>Option 1</div>
   <div>Option 2</div>
  </div>
  <label for="navigation-button" id="navigation-label">
   <span class="drop-icon">
    X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
   </span>
  </label>
 </div>
</form>

</body>
</html>

【问题讨论】：

不，它在 IE11 上不起作用
@AlexanderDayan 我的错……我点击了复选框而不是图像。是的，它在 IE 中不起作用。

标签： html css

【解决方案1】：

为IE添加以下解决方法可以解决问题：

label{
        display: inline-block;
    }
    label img{
        pointer-events: none;
    }

<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
	position: absolute;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	top: 40px;
}

#navigation-menu .menu-items {
	display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu span.drop-icon {
	display: inline;
}
label{
    display: inline-block;
}
label img{
    pointer-events: none;
}
</style>

</head>
<body>

<form>
 <div id="navigation-menu">
  <input type="checkbox" id="navigation-button">
  <div class="menu-items">
   <div>Option 1</div>
   <div>Option 2</div>
  </div>
  <label for="navigation-button" id="navigation-label">
   <span class="drop-icon">
    X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
   </span>
  </label>
 </div>
</form>

</body>
</html>

请注意，#navigation-menu ul span.drop-icon { 行中有不必要的 ul

【讨论】：

就是这样。我不知道图像可以接收事件并且不会将它们传递给父元素，至少在 Internet Explorer 中是这样。这种风格也是以前编辑的剩余部分。感谢您解决问题。