Javascript 牵线木偶ItemView事件处理与引导下拉列表冲突

我有一个创建表的复合视图，其中childView集合显示每一行。每行末尾都有一个基于引导的按钮下拉列表。 单击该行将打开一个模式（工作），但在单击按钮下拉列表时仍会触发事件，因此模式显示，下拉列表显示在下面

如何防止按钮上的点击向下传播到行点击事件，而不防止引导钩子也被切断

处理这些类型的特殊点击事件的标准方法（在我的研究和书籍阅读中）在返回的jquery事件上使用

e.stopPropagation（）

，以防止事件进一步发展，但这会阻止引导下拉打开事件触发

如果我在单击buttongroup时仍然调用stopPropagation（），然后使用事件对象的currentTarget对象并手动切换该类，我可以让下拉菜单打开而不发生冲突，但是由于close按钮触发器向下4层，我将使用蛮力&call.parent（）4次来切换该类，这听起来不太可持续，也不便于携带

如何使用Bootstrap的内置切换进行行单击操作并打开和关闭下拉列表

项目视图

Show.Result = Marionette.ItemView.extend({
    tagName:"tr",
    template: "#row-template",
    events:{
        "click .js-delete-result": "editRow",
        "click .js-edit-result": "deleteRow",
        "click div.btn-group button": "openSettings"
        "click": "rowClicked",
    },
    editRow: function(e){e.stopPropagation();alert("you trying to delete bro?!")},
    deleteRow: function(e){e.stopPropagation();alert("you trying to edit bro?!")},
    openSettings: function(e){
            //e.stopPropagation()
            //$(e.currentTarget).parent().toggleClass('open')
            //e.currentTarget.button('toggle');
        },
    rowClicked:function(e){
        e.preventDefault()
        this.trigger("show:result",this)
    },
}

模板

<script id="row-template">
    <td class="vert-align"><%= value %></td>
    <td class="vert-align"><%= notes %></td>
    <td class="vert-align">
      <div class="btn-group">
        <button class="btn btn-xs btn-default dropdown-toggle" aria-haspopup="true"  data-toggle="dropdown" aria-expanded="false">
            <span class="glyphicon glyphicon-edit"/>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#" class="js-edit-result">Edit</a></li>
            <li><a href="#" class="js-delete-result"> Delete <i class= "glyphicon glyphicon-trash"/></a></li>
        </ul>
      </div>
    </td>
</script>

---

只是一个想法，没有经过测试。在按钮的父级停止传播的id是什么？e、 g.

单击div.btn-group

？它不应该干扰默认引导行为，但它会阻止它冒泡到行本身。

试试这个

  rowClicked:function(e){
    if($(e.currentTarget).is('td')){ //or e.target will also do
        this.trigger("show:result",this);
    }
}, 

---

经过大量的谷歌搜索和测试，我认为这可能是目前最好的方法。它并没有真正解决我的问题的核心，但是由于在引导程序可以到达它之前插入了一个通用的点击事件处理程序，所以将点击的焦点更改为更具体的内容似乎已经做到了这一点

感谢

@Pawan

和

@squall3d

在这个方向上提供了一些指针，但我仍在寻找如何更好地传播/设置/控制事件侦听器以防止将来与其他库发生冲突的答案

但是，为了让它暂时工作，我将通用的单击更改为“单击td”：“rowClicked”

td

几乎是基本层，但足够具体，因此不会干扰按钮事件。我不再需要按钮点击处理程序（我们希望bootstrap来完成），因此它被删除：

“click div.btn-group button”：“openSettings”

值得注意的是，我确实向rowClicked函数添加了额外的代码，以防止在显示按钮下拉列表时打开模式，并且在单击下拉列表外部以关闭该行时意外单击该行。我发现这是一个更好的用户体验

    rowClicked:function(e){
        if($("#edit-btn").hasClass("open")){
            //also do nothing - the dropdown is open
        }
        else{
            e.stopPropagation()
            e.preventDefault()
            this.trigger("show:result",this)
        }
    }

并向btn组添加了一个id以供jquery选择

<div class="btn-group" id="edit-btn">

---

这是因为Bootstrap添加了一个

.open

css类来触发显示下拉html。

不起作用。如果没有e.stopPropagation（），它会传播到通用的click（rowClicked），而使用stopPropagation，它仍然能够处理引导侦听器。（但确实阻止了传播）。不确定为什么DIV级别的stopPropagation会影响按钮的引导侦听器，但它似乎会影响按钮的引导侦听器。值得尝试将其添加到更高级别的父级，并在此基础上进行侦听，例如，

。中的actions wrapper

并不能真正回答我的问题，这只是我在最后添加的rowClicked函数的翻版；我更感兴趣的是了解为什么木偶会压倒bootstrap的侦听器。谢谢你！

    rowClicked:function(e){
        if($("#edit-btn").hasClass("open")){
            //also do nothing - the dropdown is open
        }
        else{
            e.stopPropagation()
            e.preventDefault()
            this.trigger("show:result",this)
        }
    }

<div class="btn-group" id="edit-btn">