focusin 和focus 的执行顺序

最新推荐文章于 2022-03-08 09:34:06 发布

ISaiSai

最新推荐文章于 2022-03-08 09:34:06 发布

阅读量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>

ISaiSai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
focusin 和focus 的执行顺序

focusin 会先执行（一直冒泡的顶层）之后才是元素的focus 执行因此无法在元素的focus中终止掉父元素的focusin 事件只能在元素的focusin 事件中终止<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="./jquery
复制链接

扫一扫