我遇到了阻止点击事件传播的麻烦。我在另一个点击功能中有一个点击功能。
这就是我想要实现的目标:
如果您逐个选择标签,这可以正常工作。但是,如果单击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>
答案 0 :(得分:0)
在每个新$('#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>