Html 在具有边界半径的div外部单击时，单击触发器

我有以下代码来实现一个切换按钮。问题是，如果我单击切换按钮外的左上角或左下角（仍在边界矩形内），单击或检查操作将被触发，就像它是一个矩形一样。奇怪的是，这只发生在左侧，而不是右侧

如何才能阻止这种情况

要重新创建问题，请单击切换开关的左上角或左下角

.开关{ 位置：相对位置； 显示：内联块； 宽度：40px； 高度：34px； } .开关输入{ 显示：无； } .滑块{ 位置：绝对位置； 光标：指针； 排名：0； 左：0； 右：0； 底部：0； 背景色：ccc； -webkit转换：.4s； 过渡：.4s； } .滑块：之前{ 位置：绝对位置； 内容：； 高度：20px； 宽度：20px； 左：3px； 底部：3px； 背景色：白色； -webkit转换：.4s； 过渡：.4s； } 输入：选中+滑块{ 背景色：2ECC71； } 输入：焦点+.滑块{ 盒影：0 1px 2ec71； } 输入：选中+。滑块：之前{ -webkit转换：translateX25px； -ms转换：translateX25px； 转换：translateX25px； } /*圆形滑块*/ .圆滑{ 边界半径：34px； 高度：25px； 宽度：50px； } .滑块.圆形：之前{ 边界半径：50%； } 可以使用class=switch从标签中删除宽度和高度。这将解决问题：

.switch {
    position: relative;
    display: inline-block;
    /* width: 40px; */
    /* height: 34px; */

---

删除标签的高度和宽度，就可以了

.开关{ 位置：相对位置； 显示：内联块； } .开关输入{ 显示：无； } .滑块{ 位置：绝对位置； 光标：指针； 排名：0； 左：0； 右：0； 底部：0； 背景色：ccc； -webkit转换：.4s； 过渡：.4s； } .滑块：之前{ 位置：绝对位置； 内容：； 高度：20px； 宽度：20px； 左：3px； 底部：3px； 背景色：白色； -webkit转换：.4s； 过渡：.4s； } 输入：选中+滑块{ 背景色：2ECC71； } 输入：焦点+.滑块{ 盒影：0 1px 2ec71； } 输入：选中+。滑块：之前{ -webkit转换：translateX25px； -ms转换：translateX25px； 转换：translateX25px； } /*圆形滑块*/ .圆滑{ 边界半径：34px； 高度：25px； 宽度：50px； } .滑块.圆形：之前{ 边界半径：50%； } 如果您为标签元素提供背景色，如下面的代码片段所示，您将看到真正的命中区域

.开关{ 背景：红色； 位置：相对位置； 显示：内联块； 宽度：40px； 高度：34px； } .开关输入{ 显示：无； } .滑块{ 位置：绝对位置； 光标：指针； 排名：0； 左：0； 右：0； 底部：0； 背景色：ccc； -webkit转换：.4s； 过渡：.4s； } .滑块：之前{ 位置：绝对位置； 内容：； 高度：20px； 宽度：20px； 左：3px； 底部：3px； 背景色：白色； -webkit转换：.4s； 过渡：.4s； } 输入：选中+滑块{ 背景色：2ECC71； } 输入：焦点+.滑块{ 盒影：0 1px 2ec71； } 输入：选中+。滑块：之前{ -webkit转换：translateX25px； -ms转换：translateX25px； 转换：translateX25px； } /*圆形滑块*/ .圆滑{ 边界半径：34px； 高度：25px； 宽度：50px； } .滑块.圆形：之前{ 边界半径：50%； }

---

如下图所示。右侧的开关类宽度不够宽

如果将.slider.round width匹配为.switch width，则应该可以工作。我还调整了.switch类的高度，使其边界不超过

.开关{ 位置：相对位置； 显示：内联块； 宽度：50px； 高度：25px； }因为这条线可能对你有用。