从单击事件处理程序 (jquery) 中排除元素

Question

我已经为页面上的某些元素定义了一个事件处理程序。

var selector = "div, select, input, button";
$(selector).on('click', function (e) {
    //deactivate function of the elements and prevent propagation
    e.preventDefault();
    e.stopPropagation();
    //...
    //dialog is loaded and created here
    //e.g. $(body).append('<see-dialog-html-from-below>');
    //...
    alert('selector click');
}

然后我在运行时向 DOM 添加（和删除）一个对话框（一次一个对话框）。简化的对话框可能如下所示：

<div id="dialog" class="ui vertical menu">
    <div class="item">
        <label for="constraints">Constraints:</label>
        <select id="constraints" name="constraints">
            <option value="0">option 0</option>
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
        </select>
    </div>
    <div class="item clearfix">
            <div class="ui buttons">
              <div id="save_button" class="ui green button">Save</div>
              <div class="or"></div>
              <div id="cancel_button" class="closebutton ui button">Cancel</div>
            </div>
    </div>
</div>

创建对话框时，我将更多点击操作绑定到取消和保存按钮。

问题是选择框。它触发我上面定义的第一个点击事件。

如何排除对话框中的所有元素，使其不包含在第一个事件处理程序中？

Answer 1

如果单击select触发警报，则在第一个事件处理程序中，则在您执行时该对话框已存在于页面中$(selector).on('click', ...)。在这种情况下，您可以使用not.

$(selector).not('#dialog').on('click', ...)

这会将click处理程序绑定到选择器匹配的所有元素，但不包括not. 如果您有多个对话框，请考虑使用 CSS 类，如ui-dialog使用not('.ui-dialog').

编辑：但请注意，如果您的对话框放置在 a 内div并且您不停止自定义事件的传播，则弹出窗口中的任何点击都会冒泡并触发父级中的处理程序div。只需确保e.stopPropagation();在向对话框操作添加处理程序时使用。