如何在点击功能里面的jQuery点击功能中停止事件传播？

Question

我遇到了阻止点击事件传播的麻烦。我在另一个点击功能中有一个点击功能。

这就是我想要实现的目标：

1. 点击选择标签
2. 然后在框内单击以确定单击了哪个标签

如果您逐个选择标签，这可以正常工作。但是，如果单击Label 1然后单击Label 2，则会记录这两个事件（请参阅控制台日志）。或者，如果您单击标签1五次，然后在框内单击，则会捕获所有五个事件。

如何停止此事件传播？

JSFiddle：https://jsfiddle.net/q930bvff

var objectName, currentObject;
$('.label').click(function(event) {

  $('.label').removeClass('selected');
  $(this).addClass('selected');
  objectName = $(this).attr('id');
  currentObject = $(this).hasClass('selected');
  
	
  if (currentObject) {
    $('#box').one('click', function(e) {
      console.log(objectName);
    });
  }
	
	event.stopPropagation();
	
});

html,
body {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 1em;
}

.label {
  padding: 12px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  display: inline-block;
  cursor: pointer;
}

.label.selected {
  background: green;
}

#box {
  height: 300px;
  width: 300px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>

Answer 1

在每个新$('#box').off("click")之前使用.one("click"来杀死click上所有先前创建的#box处理程序。

请参阅下面的工作代码：

var objectName, currentObject;
$('.label').click(function(event) {

  $('.label').removeClass('selected');
  $(this).addClass('selected');
  objectName = $(this).attr('id');
  currentObject = $(this).hasClass('selected');
  
	
  if (currentObject) {
    $('#box').off("click").one('click', function(e) {
      console.log(objectName);
    });
  }
	
	event.stopPropagation();
	
});

html,
body {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 1em;
}

.label {
  padding: 12px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  display: inline-block;
  cursor: pointer;
}

.label.selected {
  background: green;
}

#box {
  height: 300px;
  width: 300px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>