单击触发元素内部时如何防止Bootstrap Modal打开？

Question

我已经设置了我的表的所有行来打开一个bootstrap模式.
但是,在每一行中,我都有一个选择框,其中包含一些用户必须能够选择的状态.
单击选择框时,如何防止打开模式？

这是我的代码:

HTML

<div class="row">
    <div class="col-md-6">
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            <tr class="user-row" data-toggle="modal" data-target="#myModal">
                <td>John Doe</td>
                <td>
                    <select class="form-control status-selection">
                        <option></option>
                        <option>Active</option>
                        <option>Inactive</option>
                    </select>
                </td>
            </tr>
            <tr class="user-row" data-toggle="modal" data-target="#myModal">
                <td>Jane Doe</td>
                <td>
                    <select class="form-control status-selection">
                        <option></option>
                        <option>Active</option>
                        <option>Inactive</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Jsfiddle链接:https://jsfiddle.net/2c21mzfm/

提前致谢.

Answer 1

看到这个小提琴:

$(".user-row select").on("click", function (e) {
    e.stopPropagation();
});

这个想法是,你停止点击事件(e-的第一个参数的回调是委托参数传递给事件冒泡达).user-row与stopPropagation