鍍金池/ 問答/Java  PHP  Python  HTML/ 點擊重復執(zhí)行，這是js冒泡嗎，怎么解決，如下圖和代碼，

點擊重復執(zhí)行，這是js冒泡嗎，怎么解決，如下圖和代碼，

如下

問題

剛開始two是隱藏的，點擊one對應的two會顯示，第一次點擊two的時候，只會跳出一個alert(),重復點擊就會遞增的alrt(), 2次，3次......

圖片

clipboard.png

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one {
            height: 100px;
            border-bottom: 1px solid #000;
        }
        
        .two {
            display: none;
            width: 50px;
            height: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-item">
            <div class="one">
                one
                <div class="two">two</div>
            </div>
        </div>
        <div class="box-item">
            <div class="one">
                one
                <div class="two">two</div>
            </div>
        </div>
        <div class="box-item">
            <div class="one">
                one
                <div class="two">two</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('.box .box-item .one').click(function() {
            $(this).find(".two").show()
            $(this).find(".two").click(function() {
                alert($(this).html());
            })
        })
    </script>
</body>

</html>
回答
編輯回答
大濕胸
  1. 這不是冒泡，這是重復綁定。
  2. DOM里的事件是這樣的，你可以想象每個DOM結構有一張散列表，這張表一開始是空的，每次注冊一個事件回調呢，就會把這個回調記到這個表上；而事件發(fā)生的時候呢，就會找到這個表，然后一個回調一個回調的去執(zhí)行。
  3. 有個常見的誤區(qū)，是以為每個DOM只有一個回調，事件發(fā)生時被觸發(fā)執(zhí)行，這是不對的。事實上，注冊了一個回調就會執(zhí)行一個，而注冊了好幾個，就會挨個執(zhí)行。
  4. 題目中的錯誤也挺常見，是一個事件回調里邊注冊另一個事件回調，這樣當外邊的回調執(zhí)行時，就會給里邊的DOM上掛一個回調，執(zhí)行多次以后，里邊的回調也相應增多，這樣在觸發(fā)里邊DOM的時候，就會有多個回調被執(zhí)行，從而導致錯誤。
  5. 原生寫法的注冊事件其實可以拒掉具名函數(shù)事件回調的重復注冊，但在jQ里，都是匿名函數(shù)/函數(shù)表達式，原生也防不住，從而變成了常見錯誤。
2017年2月20日 10:30
編輯回答
青黛色

$('.box .box-item .one').click(function() {

    $(this).find(".two").show()
    $(this).find(".two").off();
    $(this).find(".two").click(function() {
        alert($(this).html());
    })
})
2017年10月6日 14:06
編輯回答
執(zhí)念
$('.box .box-item .one').click(function()
{
    $(this).find(".two").show()
})
$(".two").click(function()
{
    alert($(this).html());
})
2018年4月27日 01:56
編輯回答
離殤
$(this).find(".two").click(function(e) {
                e.stopPropagation();
                alert($(this).html());
            })
2018年5月7日 02:11