javascript - 包裹在标签中时会触发后面的单击事件

Question

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

输入有一个单击事件，当我单击重置元素时，我希望阻止该事件。 当两个元素都不在 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 标记包裹时，就会出现问题。当我单击重置元素时，会触发输入单击事件，这是一个问题:

$(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
  });