点击子元素也会触发它的父单击事件 [英] clicking on child element also triggers click event on it parent

问题描述

场景

我在我的应用程序的骨干视图包括几个箱（这是div元素）。当用户点击一个框，并按住鼠标按钮500毫秒，那么我想显示在左上角有一个删除按钮。当用户点击其他地方 #wrapper指定那么删除按钮应该隐藏。

问题

所以显示删除按钮不是问题。它只删除按钮，当我点击并按住第二它显示了半秒，然后隐藏删除按钮。它隐藏，因为我也在增加点击事件，实际上隐藏了删除按钮，它的父元素 #wrapper指定。

问

所以，我怎么能阻止父元素 #wrapper指定从触发，当我点击并按住子元素的click事件箱？

这是我的code

下面是code的父元素模块

  VAR盒= Backbone.View.extend（{
    EL：#wrapper指定'，    事件：{
        盒子上的触发方式功能的包装，即父母在单击时方法//：点击
    }，    渲染：功能（PaintBoxModel）{
        VAR paintBoxView =新PaintBoxView（{模式：PaintBoxModel}）;
        。这$ el.find（'＃内容）追加（paintBoxView.render（）EL）;
        返回此;
    }，    方法：功能（）{
        的console.log（'法'）;
        App.Vent.trigger（'bodyclicked'）; //触发事件
    }}）;
 

下面是子元素模块

  VAR盒= Backbone.View.extend（{
    事件：{
        鼠标按下'：'mouseHoldDown'，
        鼠标松开'：'removeMouseHoldDown
    }，    初始化：功能（）{
        this.timeoutId = 0;
        App.Vent.on（'bodyclicked'，this.removeDeleteBtnShadow.bind（本））; //我在这里听click事件被点击父`＃wrapper`时
    }，    mouseHoldDown：功能（）{
        this.timeoutId = setTimeout的（this.addDeleteBtnShadow.bind（本），500）;
    }，    removeMouseHoldDown：功能（）{
        clearTimeout（this.timeoutId）;
    }，    addDeleteBtnShadow：功能（）{
            这$ el.append（'＆LT; A HREF =＃类=删除＆GT; X＆LT; / A＆GT;'）;
            这$ el.addClass（'是阴影'）;
    }，    removeDeleteBtnShadow：功能（）{
        。这$ el.find（'删除'）删除（）;
        这$ el.removeClass（'是阴影'）;
    }}）;
 

解决方案

通事件作为参数，并使用 .stopPropagation（）。

  removeMouseHoldDown：功能（E）
{
   e.stopPropagation（）;
}
 

Scenario

My view in my backbone app consists of several boxes(which are div elements). When user clicks on one box and hold down the mouse button for 500 millisecond, then I want to show a delete button on top left corner. When user clicks on anywhere else #wrapper then that delete button should hide.

Problem

So showing delete button is not the issue. It does show delete button when I click and hold for a second it shows delete button for half a second then hides. It hides because I am also adding click event to its parent element #wrapper which actually hides this delete button.

Question

So how can I stop parent element #wrapper from triggering click event when I am clicking and holding down on child element box?

Here is my code

Here is the code for parent element module

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
    }

});

Here is module for child elements

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

});

解决方案

Pass event as argument and use .stopPropagation().

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

这篇关于点击子元素也会触发它的父单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！