Jquery检查是否在元素内

Jquery to check if inside element

本文关键字：元素 是否 检查 Jquery      更新时间：2023-09-26

我试图添加一个类到一个元素，如果用户已经点击里面。

所有通常的规则都适用——"inside"意味着它可以在子节点、孙子节点等的内部。

如果在里面，我需要添加一个类-如果在外面的类应该被删除。

我已经拼凑了这个例子，它可以工作，但作为一个非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>

使您的fieldset可聚焦(但不是表列)，使用tabindex属性为负值。然后使用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>

相关文章：