从单击事件处理程序中排除元素 (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>

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

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

如何将对话框中的所有元素排除在第一个事件处理程序中？

Answer 1

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

从选择器中排除一些元素

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

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

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

Answer 2

我现在已经通过为对话框的所有元素添加单击事件处理程序解决了这个问题，如下所示：

$('#dialog > ' + selector).on('click', function (e) {
    e.stopPropagation(); //prevent the event from bubbling through the DOM hierarchy
});

如果您知道如何在创建处理程序时排除对话框的解决方案，请告诉我。

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

Exclude elements from click event handler (jquery)

javascript

jquery

click