gpt4 book ai didi

javascript - 用于复选框和标签的 Backbone View 事件处理程序

转载 作者:搜寻专家 更新时间:2023-11-01 05:04:24 24 4
gpt4 key购买 nike

我试图找出用户单击后是否选中了复选框 ID。复选框包裹在标签中,标签也必须是可点击的。我的 HTML 代码是:

<div id="view_container">a</div>

<script type="text/template" id="view_template">
<ul>
<li>
<label>
<input type="checkbox" checked="" value="a">A option
</label>
</li>
<li>
<label>
<input type="checkbox" value="b">B option
</label>
</li>
<li>
<label>
<input type="checkbox" value="c">C option
</label>
</li>
</ul>
</script>

回答 JavaScript:

View = Backbone.View.extend({
initialize: function() {
console.log('in the init');
this.render();
},
render: function() {
var template = _.template($("#view_template").html(), {});
this.el.html(template);
},
events: {
'click ul li label': 'clicked',
},

clicked: function(e) {
e.stopPropagation();

console.log('e.target is ' + e.target);
console.log('e.currentTarget is ' + e.currentTarget);

var isChecked = $(e.currentTarget).find('input:first').is(':checked');
var selected = $(e.currentTarget).find('input:first').val().trim();

console.log('isChecked is ' + isChecked);

},
});

var view = new View({
el: $("#view_container")
});

jsfiddle 是 here .

有几个问题。如果我单击输入,它工作正常并且 isChecked 的值为 true。但是,如果我单击标签,函数 clicked 执行两次,console.log 输出为:

e.target is [object HTMLLabelElement]
e.currentTarget is [object HTMLLabelElement]
isChecked is false
e.target is [object HTMLInputElement]
e.currentTarget is [object HTMLLabelElement]
isChecked is true

所以 isChecked 第一次是 false。

那么,无论用户是点击标签还是直接点击输入,我如何知道复选框是否被选中?以及如何在用户点击标签时阻止处理程序执行两次?

最佳答案

问题是,本质上,包含 <input> 的标签s 或通过 for 连接到他们属性触发关联输入的点击事件。所以有2个点击事件:

  • 实际点击 <label>
  • 点击触发于 <input>通过标签。

因此,如果我们监听标签上的点击事件,在这种情况下我们将同时捕获它们 - 因为点击在 <input> 上触发。也会冒泡到<label>因为它是 parent 。

我们可以通过监听复选框本身而不是标签上的点击来解决这个问题。

您可以使用 jQuery 执行以下操作 is 使用 :checkbox 的方法和 :checked选择器如下所示。

    View = Backbone.View.extend({
initialize: function () {
this.render();
},
template: _.template($("#view_template").html()),
events: {
'click ul li :checkbox': 'clicked',
},
render: function () {
this.$el.append(this.template({}));
},
clicked: function (e) {
var $target = $(e.target);
var selected = $target .is(':checked');
console.log('selected: ', selected, 'value: ', $target.val());
}
});

var view = new View({
el: $("#view_container")
});

Updated fiddle

请注意,缓存模板函数而不是调用 _template 是一个好习惯。每次渲染被调用。

关于javascript - 用于复选框和标签的 Backbone View 事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33386377/

24 4 0