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

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

如下

問(wèn)題

剛開(kāi)始two是隱藏的，點(diǎn)擊one對(duì)應(yīng)的two會(huì)顯示，第一次點(diǎn)擊two的時(shí)候，只會(huì)跳出一個(gè)alert(),重復(fù)點(diǎn)擊就會(huì)遞增的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. 這不是冒泡，這是重復(fù)綁定。
  2. DOM里的事件是這樣的，你可以想象每個(gè)DOM結(jié)構(gòu)有一張散列表，這張表一開(kāi)始是空的，每次注冊(cè)一個(gè)事件回調(diào)呢，就會(huì)把這個(gè)回調(diào)記到這個(gè)表上；而事件發(fā)生的時(shí)候呢，就會(huì)找到這個(gè)表，然后一個(gè)回調(diào)一個(gè)回調(diào)的去執(zhí)行。
  3. 有個(gè)常見(jiàn)的誤區(qū)，是以為每個(gè)DOM只有一個(gè)回調(diào)，事件發(fā)生時(shí)被觸發(fā)執(zhí)行，這是不對(duì)的。事實(shí)上，注冊(cè)了一個(gè)回調(diào)就會(huì)執(zhí)行一個(gè)，而注冊(cè)了好幾個(gè)，就會(huì)挨個(gè)執(zhí)行。
  4. 題目中的錯(cuò)誤也挺常見(jiàn)，是一個(gè)事件回調(diào)里邊注冊(cè)另一個(gè)事件回調(diào)，這樣當(dāng)外邊的回調(diào)執(zhí)行時(shí)，就會(huì)給里邊的DOM上掛一個(gè)回調(diào)，執(zhí)行多次以后，里邊的回調(diào)也相應(yīng)增多，這樣在觸發(fā)里邊DOM的時(shí)候，就會(huì)有多個(gè)回調(diào)被執(zhí)行，從而導(dǎo)致錯(cuò)誤。
  5. 原生寫(xiě)法的注冊(cè)事件其實(shí)可以拒掉具名函數(shù)事件回調(diào)的重復(fù)注冊(cè)，但在jQ里，都是匿名函數(shù)/函數(shù)表達(dá)式，原生也防不住，從而變成了常見(jiàn)錯(cuò)誤。
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