为了账号安全,请及时绑定邮箱和手机立即绑定

为什么点击文本框聚焦会弹出窗口?focus不是不冒泡么?求解~

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        .left div,

        .right div {

            width: 500px;

            height: 50px;

            padding: 5px;

            margin: 5px;

            float: left;

            border: 1px solid #ccc;

        }


        .left div {

            background: #bbffaa;

        }


        .right div {

            background: yellow;

        }

    </style>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

</head>


<body>

<h2>自定义事件triggerHandler</h2>

<div class="left">

    <div id="accident">

        <a>triggerHandler事件</a>

        <input type="text">

    </div>

    <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>

    <button>不会冒泡,不触发浏览器默认聚焦行为</button>

</div>

<script type="text/javascript">


    //给input绑定一个聚焦事件

    $("input").on("focus",function(event,title) {

        $(this).val(title)

    });


    $("#accident").on("click",function() {

        alert("trigger触发的事件会在 DOM 树中向上冒泡");

    });

    //trigger触发focus

    $("button:first").click(function() {

        $("a").trigger("click");

        $("input").trigger("focus");

    });


    //triggerHandler触发focus

    $("button:last").click(function() {

        $("a").triggerHandler("click");

        $("input").triggerHandler("focus","没有触发默认聚焦事件");

    });




</script>

</body>


</html>


正在回答

1 回答

不是input元素上的focus冒泡,是通过trigger模拟触发了a标签的点击事件,点击事件向上冒泡

 $("button:first").click(function() {

        $("a").trigger("click");//这儿会向上冒泡至父级元素,虽然a标签并没有显示绑定事件处理函数

        $("input").trigger("focus");

    });


2 回复 有任何疑惑可以回复我~
#1

三千道藏

看见评论又说input点击出现alert,借此地说一下:并不是触发了input事件冒泡,而是触发click事件委托。
2019-01-20 回复 有任何疑惑可以回复我~
#2

三千道藏 回复 三千道藏

<div> <input type="text"> </div> <script> $('div').on('click',function(e){ console.log('ok',e) }) // $('input').on('focus',function(e){ // console.log('ok',e) // }) </script>
2019-01-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么点击文本框聚焦会弹出窗口?focus不是不冒泡么?求解~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信