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中匹配的元素。如果您有多个对话框，请考虑使用ui-dialog之类的CSS类并使用not('.ui-dialog')。

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

Answer 2

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

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

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

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

2 个答案: