How to get a correct event target in Backbone.js View that is listen to an event of jqGrid?

问题

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;
    }
});

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?

Thanks!

回答1:

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;
});

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.

Correct implementation would be

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

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.

The demo demonstrate the result.

回答2:

First thing, please change:

return $(e.target).is('img') ? false : true;

To:

return !$(e.target).is('img');

Secondly, you should have a look at jqGrid's doc which says that the arguments the listener takes are (rowid, e). So basically the e argument you use is instead the rowid, with no target key whatsoever.

Thirdly, have also a look at Backbone's doc and if your version is recent enough (or if you can update), consider removing _.bindAll(this) and instead use the Model#listenTo method like self.listenTo(self.$jqGrid, self.beforeSelectRow).

Last but not least, are you sure the beforeSelectRow event is triggered by your $jqGrid element? It could be otherwise. But that's just something to verify if it doesn't work after those changes.

来源：https://stackoverflow.com/questions/15834635/how-to-get-a-correct-event-target-in-backbone-js-view-that-is-listen-to-an-event