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

Exclude elements from click event handler (jquery)

本文关键字：排除 元素 jquery 单击 事件处理 程序      更新时间：2023-09-26

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

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触发警报，则在第一个事件处理程序中，则在执行$(selector).on('click', ...)时，对话框已存在于页面中。在这种情况下，您可以使用 not 从选择器中排除某些元素。

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

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

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

我现在

通过为对话框的所有元素添加一个单击事件处理程序来解决此问题，如下所示：

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

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

相关文章：