如何从jQuery事件处理程序中排除子元素

How to Exclude Child Element from jQuery Event Handler?

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

我正在修改一个现有的网页。我在页面中添加了一个<textarea>，但发现Enter键不像预期的那样工作。

在花了相当长的时间搜索之后，我发现了以下内容:

$('form').keypress(function (e) {
    if (e.keyCode == 13)
        return false;
});

我需要尽可能多地保留现有的功能。但我需要为我的<textarea>禁用这个。(看来我的是页面上唯一的<textarea>。

但是我该怎么做呢?我考虑将.not('textarea')添加到上面的选择器中。但这不起作用，因为处理程序是在表单上，而不是一个文本区域。

我可以从上面的过滤器中排除<textarea> s吗?

jsBin demo

您可以简单地针对输入

$('form input').keypress(function (e) {
    if (e.which == 13) e.preventDefault(); // Don't misuse return false
});

文本区将继续按回车键

取决于用例。

如果你想确保没有刹车使用:

$('form *:not(textarea)').keypress(function (e) {
    if (e.which == 13) e.preventDefault();
});

其中*针对所有子节点，:not选择器排除所需的子节点。

下面是另一个例子:

$('form *').keypress(function (e) {
    if (e.which == 13 && this.tagName!=="TEXTAREA") e.preventDefault(); 
});

您可以检查目标是否为textarea: 

$('form').keypress(function (e) {
    if($(e.target).is('textarea')) return;
    if (e.keyCode == 13)
        return false;
});

在函数中添加一个过滤器

$('form').keypress(function (e) {
    if (e.keyCode == 13 || e.target.tagName.toLowerCase() == 'textarea')
        return false;
});

最简单的方法是使用on()，因此您不需要在事件处理程序中进行任何额外的元素比较:

$('form').on("keypress", ":not(textarea)", function (e) {
    if (e.keyCode == 13)
        return false;
});

使用on()来监视表单，使用CSS选择器来避免文本区域。为了便于以后调整，您可以使用以逗号分隔的more:not()操作符根据标签名或类将其他元素列入黑名单。另外，无论如何，现在建议使用on()而不是旧的单一用途处理程序。

相关文章：