javascript - 单击触发器内的元素时如何防止 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

参见 this fiddle :

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

想法是停止点击事件(e - on 回调的第一个参数，它是 事件) 使用 stopPropagation 冒泡到 .user-row