带有 tbody tr onclick 事件的表中的引导上下文菜单下拉菜单答案

【问题标题】：Bootstrap context menu Dropdown in table with tbody tr onclick event带有 tbody tr onclick 事件的表中的引导上下文菜单下拉菜单
【发布时间】：2016-11-05 13:01:50
【问题描述】：

我使用 Bootstrap 3 和 KnockoutJS。

我有一个包含 5 列的表，并希望使用 Bootstrap Dropdown 添加第 6 列用于上下文菜单操作。

这是我的html：

<table id="employeesTable" class="table table-condensed table-striped table-bordered table-hover myDefaultTable">
    <thead>
        <tr>
            <th class="myDefaultTable-left">Employee Name</th>
            <th>... 4 other columns</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employee">
        <tr data-bind="attr: { 'id': EmployeeId }">
            <td class="myDefaultTable-left" data-bind="text: EmployeeName"></td>
            <td data-bind="text: col2"></td>
            <td data-bind="text: col3"></td>
            <td data-bind="text: col4"></td>
            <td data-bind="text: col5"></td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#" data-bind="click: $parent.RemoveEmployee.bind($parent), clickBubble: false">Remove employee</a></li>
                        <li><a href="#" data-bind="click: $parent.DuplicateEmployee.bind($parent), clickBubble: false">Duplicate employee</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我的问题是，在 JavaScript 中，我有（并且想要保留）一个单击操作，该操作会打开表中单击项目的详细信息屏幕，如下所示：

$container.on('click', '#employeesTable tbody tr', { self: self }, self._employeeDetailClick);

我的上下文菜单事件如下所示：

self._model = ko.mapping.fromJS(result);
self._model.self = self;
self._model.RemoveEmployee = self._removeEmployee;

我正在寻找一种在用户单击第 6 列时不调用“tbody tr on click 事件”但调用适当的上下文菜单事件的方法。我试过clickBubble: false，但它不起作用。

如果我注释掉这一行

$container.on('click', '#employeesTable tbody tr', { self: self }, self._employeeDetailClick);

...然后我的上下文菜单有效。

【问题讨论】：

您能否编辑帖子并添加//删除一些代码以使其成为minimal reproducible example？由于缺少和/或可能不相关的部分，有些帖子很难理解。
一般来说，使用 Knockout，您通常有一个 click 绑定处理程序或一个自定义绑定处理程序，用于与 DOM 操作小部件集成。您是否尝试使用其中任何一个？
我已经删除了 jQuery 事件处理并在表格的前 5 列上实现了 Knockout 点击绑定。这解决了我的问题。感谢@Jeroen 和 user3297291 引导我朝这个方向发展。确实清晰多了。
很高兴听到。不要忘记接受适当的答案，或分享您自己的解决方案作为答案，以便其他有相同问题的人可以轻松找到解决方案。

标签： javascript twitter-bootstrap knockout.js

【解决方案1】：

clickBubble: false 实际上阻止了点击事件冒泡到 DOM 元素的父元素。您需要将其设置为 true。

除此之外，我非常同意 Jeroen：您应该避免混淆 jQuery 和淘汰赛事件处理。

var log = function(library) { console.log(library + ": CLICK") };

ko.applyBindings({
  logClick: log.bind(null, "KO")
});

$("body").click(log.bind(null, "jQuery"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<button data-bind="click: logClick, clickBubble: true">click bubble true</button>

<button data-bind="click: logClick, clickBubble: false">click bubble false</button>

【讨论】：