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

Question

我正在修改现有的网页。我在页面中添加了<textarea>，但发现Enter键无法按预期工作。

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

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

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

但我怎么能这样做？我想过将.not('textarea')添加到上面的选择器中。但这并不起作用，因为处理程序在表单上，​​而不是textarea。

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

Answer 1

<强> jsBin demo

您可以简单地定位输入

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

textarea会像往常一样使用回车键继续

取决于用例。

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

$('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(); 
});

Answer 2

您可以检查目标是否是textarea：

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

Answer 3

最简单的方法是使用on（），因此您不需要在事件处理程序内部进行任何额外的元素比较：

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

使用on（）来查看表单，使用css选择器来避免textareas。 为了以后轻松调整，你可以使用更多的标记名或类将其他元素列入黑名单：逗号分配的not（）运算符。另外，on（）现在推荐用于旧的单用途处理程序。

Answer 4

在您的函数中添加一个过滤器，如下所示

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