javascript - Bootstrap 拆分按钮下拉 : programmatic access to prevent overlapped click events

Question

我有一个表格，每行都有一个点击事件来打开一个模式，我正在寻找使用 Bootstrap 在表格中为一些拆分按钮创建一列操作

问题是 tr 点击事件干扰了拆分按钮点​​击事件

here is my demo

点击表格行，你会看到表格行模态单击操作按钮，您将看到单独的操作模式但是，单击拆分组按钮的下拉菜单，它会打开下拉菜单并打开表格行模式

原因是重叠的onclick函数Click events on overlapping items

action button onclick 曾经也有这个问题，所以我给按钮添加了一个onclick stop propagation，防止overlay clicks的发生

 onclick="$('#dd-modal').modal('show');event.stopPropagation();" 

这样就解决了我的按钮问题，但是我的按钮下拉菜单，我不知道如何在不触发 tr onclick 事件的情况下以编程方式显示下拉菜单

我认为

.trigger('click.bs.dropdown');

可能与此有关，但不确定如何实现

感谢您的帮助

$(document).ready(function () {
    $("#table").on("click", "tr", function () {
        $('#tr-modal').modal({
            backdrop: 'static',
            keyboard: false
        });
    });
});

function opener() {
    $('#dd-modal').modal('show');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<table id="table" class="table table-striped">
    <tr>
        <td>My Name</td>
        <td>Date</td>
        <td>
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </div>
        </td>
    </tr>
    <tr>
        <td>Some other Name</td>
        <td>Date</td>
        <td>
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-success" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </div>
        </td>
    </tr>
</table>
<div class="modal fade" id="tr-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
                 <h4 class="modal-title">Table Row Modal</h4>

            </div>
            <div class="modal-body">
                <p>Table row modal</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
                <button type="button" class="btn btn-primary">Ok!</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="dd-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
                 <h4 class="modal-title">split button modal</h4>

            </div>
            <div class="modal-body">
                <p>split button modal</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
                <button type="button" class="btn btn-primary">Ok!</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

您可以快速检查目标的 tagName 并忽略它是一个按钮还是父按钮(这是为了防止您碰巧单击插入符号图标的“跨度”)来绕过这个问题很快。

用这个检查目标类型的 if 语句包装你的模态打开调用...

$("#table").on("click", "tr", function (e) {
    if (e.target.tagName !== "BUTTON" && e.target.parentElement.tagName !== "BUTTON") {
      $('#tr-modal').modal({
        backdrop: 'static',
        keyboard: false
      });
    }
}

用那个替换你文档准备好的js的内容

注意:注意第一行的事件参数

function (e)

Working Demo