javascript - Jquery 检查元素是否在内部

标签 javascript jquery

如果用户在某个元素中单击,我会尝试向该元素添加一个类。

所有通常的规则都适用 - “内部”意味着它可以在子、孙等内部。

如果在内部,我需要添加一个类 - 如果在外部,则应该删除该类。

我已经拼凑了这个示例,它可以工作,但作为一个非 JavaScript 人,我希望得到一些关于它是否是合理方法的反馈,以及是否可以改进 - 通过改进,我指的是jquery/javascript 性能。

任何建议表示赞赏。

$("body").click(function (e) {

    $fs = $(e.target).closest("fieldset.expand");

    if ($fs.length) {
        $fs.addClass("focus");
    }
    else {
        $("fieldset.expand").removeClass("focus");
    }
});
<body>
    <fieldset class="expand">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </fieldset>
</body>

最佳答案

使用具有负值的 tabindex 属性,使您的 fieldset 可聚焦(但不可选项卡)。然后使用 focusin focusout 事件设置逻辑:

$('fieldset.expand').on('focusin focusout', function() {
  $(this).toggleClass('focus', $(this).find('*').addBack().is(':focus'));
});
fieldset.focus {
  outline: 0;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset tabindex="-1" class="expand">
  <input type="text" />
  <input type="text" />
  <input type="text" />
</fieldset>

关于javascript - Jquery 检查元素是否在内部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32862683/

相关文章:

javascript - 处理相对图像路径ajax

javascript - 新的 Google reCAPTCHA JavaScript 命名空间回调

javascript - 单击单选按钮时如何隐藏 li

javascript - 单击子 div 时需要帮助防止父 onclick 事件

javascript - 如何使用 javascript 从 rgb 格式检索单个颜色分量(红色、蓝色、绿色)?

jquery - 删除 div 有类错误消息并在父 div 类 styled-select 之后显示

javascript - 使用 AMD 和 Backbone 在模块之间共享对象(或状态)的简洁方法

javascript - 侧边栏中的事件列表

javascript - 如何将 id 放在 url 中间

jquery - 使用 Css 媒体查询覆盖 JQuery css 值