Question

我在后面的元素上遇到了点击事件的问题。我有一个输入与另一个元素重置它。该元素绝对位于输入之前。

当我点击reset元素时，输入有一个我想要阻止的点击事件。 当两个元素都不在LABEL标记：

时，此方法正常

$(document).on('click', '.popup_selector', function(e){
	alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e){
	$('input').val(''); // clear the input
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
}

i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}

input {
  padding-right: 2em;
}

div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <i class='clear'>X</i>
  <input type="text" class="popup_selector" />
</div>

当两个元素都由LABEL标记包装时，会出现问题。当我单击reset元素时，会触发输入单击事件，这是一个问题：

$(document).on('click', '.popup_selector', function(e){
	alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e){
	$('input').val(''); // clear the input
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
}

i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}

input {
  padding-right: 2em;
}

div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <div>
    <i class='clear'>X</i>
    <input type="text" class="popup_selector" />
  </div>
</label>

有人知道如何解决它吗？

非常感谢你。

在chrome 51中测试。

Answer 1

试试这个会起作用

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

Answer 2

点击时标签的默认行为focus包含在input元素中，或使用for属性与其关联。

使用e.preventDefault()来防止默认行为

$(document).on('click', '.popup_selector', function(e) {
  alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e) {
  e.preventDefault();
  $('input').val('');
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
  z-index: 100
}
i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}
input {
  padding-right: 2em;
}
div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <div>
    <i class='clear'>X</i>
    <input type="text" class="popup_selector" />
  </div>
</label>

Answer 3

根据 spec ，

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

所以这里的替代方法是在标签点击上插入一个黑客，

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

$(document).on('click', '.popup_selector', function(e){
	alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e){
	$('input').val(''); // clear the input
});
$('label').click(function(event){
  event.preventDefault();
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
}

i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}

input {
  padding-right: 2em;
}

div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <div>
    <i class='clear'>X</i>
    <input type="text" class="popup_selector" />
  </div>
</label>

在标签中换行时会触发后面的Click事件

3 个答案: