【事件代理，怎么能访问到target的子节点上？ _事件】

事件代理，怎么能访问到target的子节点上？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

事件

详细描述

截图

代码

<!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">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/page7.css">
    <title>杀人页面</title>
</head>
<body>
<header>
    <img class="h-i1" id="back" src="img/2-back.png" >
    杀手杀人
    <img class="h-i2" id="close" src="img/4-close.png" >
</header>
<main>
    <div class=main-t>
        <p class="mtt"></p>
        <p class="mtb"></p>
    </div>
    <div class="play-box" id="play-box" >
    </div>   
</main>
<footer>
    <button id="playgame" >
        确定
    </button>
</footer>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/page7.js"></script>
</body>
</html>

console.log("js文件");

var Num = sessionStorage.getItem("Num"); //上一页面输入人数
var playArr = JSON.parse(sessionStorage.getItem("playArr")); //上一页面身份数组
var x = sessionStorage.getItem('x'); //判断杀人页面还是投票页面
console.log('页面状态：' + x + "页面");
var kiNum = sessionStorage.getItem('kiNum'); //杀手人数
var ciNum = sessionStorage.getItem('ciNum'); //平民人数
var deadArr = new Array; //死亡玩家数组    这里换个页面寸 这里要取出数组
var identity; //选中身份
var n; //选中的玩家数组角标

$('#back').on('click', function () {
    alert('上了贼船你还想跑？');
}); //左上角返回按钮
$('#close').on('click', close); //右上角关闭按钮
function close() {
    var message = confirm("是否结束本轮游戏？"); //是否确定
    if (message) {
        location.replace('page2.html'); //返回首页
    }
}

var playbox = $('.play-box');
for (var i = 0; i < Num; i++) {
    playbox.append(
        `<div class="player">
            <div class="play-t">` +
        playArr[i] +
        `</div>
            <div class="play-b">` +
        (i + 1) +
        `号</div>
        </div>`);
} //生成角色模块

var playerArr = $('.play-t'); //角色盒子数组

var outbox = document.getElementById('play-box');

$('#playgame').on('click', function () {
    switch (x) {
        case '杀人':
            ciNum = ciNum - 1; //平民减少一人         
            break;
        case "投票":
            if (identity == "杀手") {
                kiNum = kiNum - 1; //杀手减少一人             
            } else if (identity == "平民") {
                ciNum = ciNum - 1; //平民减少一人
            }
            break;
    }
    deadArr.push(n);
    sessionStorage.playArr=JSON.stringify(deadArr);
    sessionStorage.ciNum = ciNum;
    sessionStorage.kiNum = kiNum;
    gameover();
});

html{
    font-size: 100px;
}
body{
    min-width:0;
}
header,footer{
    position:fixed;
    z-index: 1;
    width: 100%;
    max-width: 640px;
}
header{
    top: 0;
    border-bottom: 1px solid #74e4db; 
}
main,footer{
    background: #29bde0;
    line-height: 0;   
}
main{
    min-height:100vh;
    margin: 0 auto;
    padding: 45px 0 1rem;
    overflow: hidden;
}
.main-t{
    line-height: 0;
}
.mtt{
    display: flex;
    align-items: center;
    height: 0.45rem;
    margin: 0;
    padding-left: 25px;
    font-size: 0.13rem;
    line-height: 1.5;
    background: #b9e9f5;
}
.mtb{
    position: relative;
    margin: 0;
    padding: 15px 0;
    font-size: 0.12rem;
    color: #fff;
    padding-left: 40px;
    line-height: 1.5;
}
.jiao{
    position: absolute;
    top: 0;
    left: 30px;
    width:0;
    height:0;
    border-width: 10px 10px 0 10px ;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;/*透明 兰 透明 透明 */
} 
.play-box{
    overflow: hidden;
}
.player{
    float: left;
    width: 20vw;
    max-width: 128px;
    height: 20vw;
    max-height: 128px;
    margin-left: 10%;
    margin-bottom: 10%;
    border: 3px solid #fff;
    box-sizing: border-box;
}
.play-t,.play-b{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.play-t{
    height: 70%;
    font-size: .15rem;
    background: #fbb435;
}
.play-b{
    height: 30%;
    font-size: .11rem;
    color: #fff;
    background: #83b09a;
}
footer{
    bottom: 0;
    text-align: center;
}
footer button{
    width: 80%;
    height: 0.4rem;
    margin: 0.2rem auto ;
    font-size: 0.2rem;
    color: #fff;
    background: #fbb435;
    border: none;
    outline: none;
}

编辑于2024-11-16