如何在Backbone.js View中获得正确的事件目标，以监听jqGrid的事件? [英] How to get a correct event target in Backbone.js View that is listen to an event of jqGrid?

问题描述

我将jqGrid与Backbone.js一起使用，并且具有表示网格的视图.代码如下:

I use jqGrid together with Backbone.js and I have the view that represents the grid. The code is below:

var GridView = Backbone.View.extend({
    initialize:     function(){
        _.bindAll(this);
    },
    beforeSelectRow:function(e){
        return $(e.target).is('img') ? false : true;
    },
    render:         function(){
        var self = this;

        this.$el.load(
            this.collection.url + 'grid/',
            function(){
                self.$jqGrid = self.$('.jqGrid');
                self.$jqGrid.on('jqGridBeforeSelectRow',self.beforeSelectRow);
            }
        );

        return this;
    }
});

网格的行可以包含图像.如果单击某些图像，我希望不会选择网格的行.我监听了由jqGrid触发的触发事件jqGridBeforeSelectRow，但是得到了错误的事件目标.我希望事件目标是图像.我发现了类似的问题 JQGrid在单击特定单元格时未选择行，并且可以完成所有工作.我的听众怎么了?

The grid's row can contain an image. If I click on some image, I will expect that the grid's row would not be selected. I listen the triggered event jqGridBeforeSelectRow which is triggered by jqGrid but I get an incorrect event target. I expect that the event target is an image. I found the similar question JQGrid Not select row when clicking in a particular cell and there is all works. What is wrong with my listener?

谢谢！

推荐答案

我自己不使用Backbone，但我希望我理解您的正确.如果单击是在网格内部的图像上，则要拒绝选择网格的行.回调beforeSelectRow是jqGridBeforeSelectRow事件的事件处理程序.如果我理解您正确的话，那么相同的事件处理程序可以通过以下方式进行绑定

I don't use Backbone myself, but I hope that I understand you correct. You want to deny selection of rows of the grid if the click was on the image which is inside of the grid. The callback beforeSelectRow is the event handler of jqGridBeforeSelectRow event. If I understand you correct then the same event handler one could bind the the following way

$("#list").bind("jqGridBeforeSelectRow", function (e) {
    return $(e.target).is('img') ? false : true;
});

事件处理程序是错误的，因为e.target始终是<table>元素的DOM，而DOM是网格的基础元素.原因是jqGridBeforeSelectRow是<table>元素的自定义事件.

The event handler is wrong because e.target is always DOM of <table> element which is base element of the grid. The reason is that jqGridBeforeSelectRow is custom event of the <table> element.

正确的实施方式是

$("#list").bind("jqGridBeforeSelectRow", function (e, rowid, eventOriginal) {
    return !$(eventOriginal.target).is("img");
});

eventOriginal表示发起"jqGridBeforeSelectRow"事件的原始click事件的事件对象.我认为对Backbone版本所做的更改对您来说是显而易见的.

The eventOriginal represent event object of the original click event which initiated the "jqGridBeforeSelectRow" event. I think that transformation of the changes to Backbone version will be clear for you.

演示演示了结果.

这篇关于如何在Backbone.js View中获得正确的事件目标，以监听jqGrid的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！