Question

我有以下设置（简化），在标签内部我有一些激活JavaScript功能的图像，如果用户点击其中一个图像，有没有办法忽略标签上的点击？

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');">
    <img src="bt1.jpg" onClick="somefun1()" />
    <img src="bt2.jpg" onClick="somefun2()" />
</label>

只是为了澄清，我不希望它在点击图像时检查复选框，但是当点击其他任何地方时它应该检查复选框！

Answer 1

您必须阻止默认操作。最简单的方法是从您的函数中return false。这是一个绕过你的函数的例子（只是从它们返回false，你应该得到相同的行为）。在Chrome中测试过，但这是一种非常标准的做法。

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');">
    <img src="bt1.jpg" onclick="return false;" />
    <img src="bt2.jpg" onclick="return false;" />
</label>

Answer 2

这与CSS无关。为了阻止标签检查相关复选框，您必须删除for="i_87"属性，或使用Javascript停止事件执行其默认操作。

在jQuery中，这将是这样的：

$("label").on("click",function(evt) {
     evt.preventDefault();
});

理论上，这应该允许click事件传递给您的图像，但取消标签的默认操作。

Answer 3

从标签中删除for="i_87"。

Answer 4

将此作为一种可能性扔出去。。。你能把按钮移到标签之外吗？

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');" />
<img src="bt1.jpg" onClick="somefun1()" />
<img src="bt2.jpg" onClick="somefun2()" />

可能需要稍微调整才能使它看起来相同，但是将按钮放入label然后抑制标签的默认行为会更有意义，但仅限于对于那些按钮。

单击标签内的按钮时，请勿选中复选框

4 个答案: