focusin 和focus 的执行顺序

最新推荐文章于 2024-09-10 13:24:07 发布

ISaiSai

最新推荐文章于 2024-09-10 13:24:07 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ISaiSai/article/details/53634782

版权

javascript 专栏收录该内容

155 篇文章 0 订阅

订阅专栏

focusin 会先执行（一直冒泡的顶层）之后才是元素的focus 执行

因此无法在元素的focus中终止掉父元素的focusin 事件
只能在元素的focusin 事件中终止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery.js"></script>
</head>
<body>
<input id="out" placeholder="out">
<div class="container" id="hig">
    <div id="def">
        <div id="abc">
            <input id="i_abc" placeholder="abc">
        </div>
    </div>
</div>
<script>
    $(function () {
        $("body").on("focusin", "div", function () {
            $("#out").focus();
        })
        $("body").focusin(function (e) {
            console.log("fi_body")
        })
        $("#abc").focusin(function (e) {
        // 会终止事件
            e.stopPropagation();
            console.log("fi_abc")
        })
        $("#def").focusin(function (e) {
            console.log("fi_def")
        })
        $("#hig").focusin(function (e) {
            console.log("fi_hig")
        })
        $("#i_abc").focus(function (e) {
            console.log("f_iabc")
            // 无效 不会终止
            e.stopPropagation();
        })
    })
</script>
</body>
</html>