Question

以下是fiddle

的示例

HTML：

<div class="wrapper">
  <label class="control-label" for="TopicWords">Label</label>
  <div class="controls">
    <input type="text" id="TopicWords">
  </div>
</div>

<br/><br/>
<span id="message"></span>

JS：

$('.wrapper').on('click','input#TopicWords', function() {
  $('#message').fadeIn('fast').text('Clicked').fadeOut('slow');
})

单击事件在input#TopicWords或label上运行。如何仅在单击input#TopicWords时才能运行

除了以下还有其他方式：

$(".control-label[for='TopicWords']").on('click', function() {
  return false;
});

或快捷方式：

$(".control-label[for='TopicWords']").on('click', false);

更新：包装器的内容是动态的，有时候我没有带有类控件的div。

Answer 1

如果我理解你的问题，你添加的解决方案就是要走的路。单击标签时也会触发click事件的原因是因为该标签上的for属性。

它说如果你点击我作为标签，我会把焦点放在for属性中指定的输入上。

除了你提供的解决方案。您可以选择删除该标签的for属性，但这是您想要的吗？

Answer 2

试试这个

Total

Answer 3

其他解决方案可以检查是否单击了输入元素

$('.wrapper').on('click','input#TopicWords', function(e) {
  if (e.target.tagName==='INPUT') {
    $('#message').fadeIn('fast').text('Clicked').fadeOut('slow');
  }
})

Answer 4

请添加此js：

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

如何在标签上禁用jQuery click事件？

4 个答案: