Javascript 在标签中换行时会触发“在后面单击”事件

我有一个问题，点击事件背后的元素。我有一个输入和另一个元素来重置它。此元素绝对位于输入之前

当我在reset元素中单击时，输入有一个我想要阻止的click事件当两个元素都不在标签标签中时，此功能正常运行：

$（文档）。在（'单击'，'上。弹出选择器'，函数（e）{
警报（'输入被剪辑，如果在X中单击则为错误'）；
});
$（'i'）。单击（函数（e）{
$（'input'）.val（“”）；//清除输入
});
i{
位置：绝对位置；
右：0.5em；
顶部：0.1米；
宽度：1米；
光标：指针；
}
i:之后{
内容：“禁用单击”；
可见性：隐藏；
溢出：隐藏；
}
输入{
右侧填充：2米；
}
div{
位置：相对位置；
显示：内联块；
}

X
试试这个，它会起作用的

$('i').click(function(e){
    e.preventDefault();
    $('input').val(''); // clear the input
  });

如果单击标签，则标签的默认行为是将
焦点放在
输入中的
元素上，或使用
for
属性与之关联

使用
e.preventDefault（）
来防止默认行为


$（文档）。在（'单击'，'上。弹出选择器'，函数（e）{
警报（'输入被剪辑，如果在X中单击则为错误'）；
});
$（'i'）。单击（函数（e）{
e、 预防默认值（）；
$（'input'）.val（''）；
});
i{
位置：绝对位置；
右：0.5em；
顶部：0.1米；
宽度：1米；
光标：指针；
z指数：100
}
i:之后{
内容：“禁用单击”；
可见性：隐藏；
溢出：隐藏；
}
输入{
右侧填充：2米；
}
div{
位置：相对位置；
显示：内联块；
}

X
根据

在当前大多数web浏览器中，与给定表单控件关联的文本（通过包含在和标记中）也成为可单击区域。因此，如果表单控件很小，例如复选框或单选按钮，则可以通过对其应用标签来大幅增加鼠标用户的“命中区域”

所以这里的另一种选择是在标签点击上插入一个hack

$('label').click(function(event){
  event.preventDefault();
});


$（文档）。在（'单击'，'上。弹出选择器'，函数（e）{
警报（'输入被剪辑，如果在X中单击则为错误'）；
});
$（'i'）。单击（函数（e）{
$（'input'）.val（“”）；//清除输入
});
$（“标签”）。单击（函数（事件）{
event.preventDefault（）；
});
i{
位置：绝对位置；
右：0.5em；
顶部：0.1米；
宽度：1米；
光标：指针；
}
i:之后{
内容：“禁用单击”；
可见性：隐藏；
溢出：隐藏；
}
输入{
右侧填充：2米；
}
div{
位置：相对位置；
显示：内联块；
}

X
我认为点击标签会触发点击输入，请尝试将清除内容放在标签外。完美。在编写“after”伪类之前，我测试了它，但它不起作用。使用after伪类，e.preventDefault可以正常工作。非常感谢。