检测ItemView控件点击骨干/木偶容器 [英] Detect click on itemview container in Backbone/Marionette

问题描述

我有以下的项目视图：

return Marionette.ItemView.extend({
        template:tpl,
        tagName: 'div',
        className: 'v_itv_record_type_item',
        events:{
            'click @ui.item':'itemClicked'
        },
        ui:{
            item:'.v_itv_record_type_item'
        },
        itemClicked:function(e){
            console.log('clicked');
        }
    });

使用以下车把模板

that uses the following handlebars template:

<div class="clicktarget">
Stuff Goes Here
</div>

如果你点击这些项目的意见之一，它不注册click事件。据我所知，骨干限制访问只是DOM的看法片，但显然这不会扩展到包含div本身，即使该容器div没有任何模板，父视图的一部分或其他情况。

If you click on one of these item views, it does not register the click event. I understand that Backbone restricts access to just the views slice of the DOM, but apparently this does not extend to the containing div itself, even though that containing div is not part of any template, parent view or otherwise.

如果我们改变在 .clicktarget 的UI哈希和重点项目点击注册。但是，这给我了我一个＆LT; D​​IV＆GT;＆LT; D​​IV＆GT;的东西去此处＆lt; / DIV＆GT;＆LT; / DIV＆GT; 结构似乎没有理由。这是检测项目的整体上点击的唯一途径意见DOM元素？

If we change the ui hash and point item at .clicktarget the click is registered. But this gives me me a <div><div>stuff goes here</div></div> structure for seemingly no reason. Is this the only way to detect a click on the entirety of an item views DOM element?

推荐答案

您可以在视图元素上的click事件通过省略选择注册：

You can register a click event on the view element by omitting the selector:

events:{
  'click' :'itemClicked'
}

请注意，如果你有在视图级事件处理程序，所有视图将泡了里面的点击和触发它的处理程序，除非它被停止（ event.stopPropagation（））在路上。这是预期的行为。

Note that if you have an event handler at view level, all the clicks inside the view will bubble up and trigger it's handler, unless it was stopped (event.stopPropagation()) on the way. This is the expected behavior.

这篇关于检测ItemView控件点击骨干/木偶容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！