点击子元素也会触发其父元素的点击事件。

Question

场景

我的backbone应用程序中的视图包含多个

元素的方块。当用户点击一个方块并按住鼠标按钮500毫秒时，我想在左上角显示一个delete按钮。当用户点击任何其他地方的#wrapper时，该delete按钮应该隐藏。

问题

因此，显示delete按钮不是问题。当我点击并保持一秒钟时，它会显示删除按钮半秒钟，然后隐藏。这是因为我还将点击事件添加到其父元素#wrapper，实际上这会隐藏删除按钮。

问题

那么，当我在子元素box上单击并按住时，如何防止父元素#wrapper触发点击事件？

这是我的代码

这是父元素模块的代码

var Boxes = Backbone.View.extend({
    el: '#wrapper',

    events: {
        'click': 'method' //when clicked on wrapper i.e. parent of box trigger method function
    },

    render: function (PaintBoxModel) {
        var paintBoxView = new PaintBoxView({ model: PaintBoxModel });
        this.$el.find('#contents').append(paintBoxView.render().el);
        return this;
    },

    method: function () {
        console.log('method');
        App.Vent.trigger('bodyclicked'); //trigger an event
    }

});

这是一个针对子元素的模块。

var Box = Backbone.View.extend({
    events: {
        'mousedown': 'mouseHoldDown',
        'mouseup': 'removeMouseHoldDown'
    },

    initialize: function () {
        this.timeoutId = 0;
        App.Vent.on('bodyclicked', this.removeDeleteBtnShadow.bind(this)); //here I am listening to the click event when parent `#wrapper` is clicked
    },

    mouseHoldDown: function () {
        this.timeoutId = setTimeout(this.addDeleteBtnShadow.bind(this), 500);
    },

    removeMouseHoldDown: function () {
        clearTimeout(this.timeoutId);
    },

    addDeleteBtnShadow: function () {
            this.$el.append('<a href="#" class="remove">X</a>');
            this.$el.addClass('is-shadow');
    },

    removeDeleteBtnShadow: function () {
        this.$el.find('.remove').remove();
        this.$el.removeClass('is-shadow');
    }

});

- Om3ga

---

event.stopPropagation() - Ohgodwhy

Answer 1

将 event 作为参数传递，并使用.stopPropagation() 方法。

removeMouseHoldDown: function (e) 
{
   e.stopPropagation();
}

- Dipesh Parmar

---

我已经尝试过那个了，但它不起作用。 - Om3ga

首先应该在 removeDeleteBtnShadow 函数中添加 e.stopPropagation()。我已经尝试过了，但它给出了这个错误 Uncaught TypeError: Cannot call method 'stopPropagation' of undefined。 - Om3ga

return false; 你试过了吗？ - Jai

当 Dipesh 拥有一个 stopPropagation 时 - Jai

刚试了一下，但问题仍然存在。 - Om3ga

Answer 2

我刚刚通过在子函数上添加event.stopPrpagation解决了这个问题。例如 -

var parentView = new Backbone.View.extend({
    ...
    events: {
        "click": "renderSomething"
    },
    renderSomething: function() {
        //some rendering code
    }
});

var childView = new Backbone.View.extend({
    ...
    events: {
        "click": "renderSomething"
    },
    renderSomething: function(event) {
         event.stopPropagation(); //this will stop the event from being propagated to the parent
        //some rendering code
    }
});

- neuDev33