子按钮点击时不执行 JS。点击为父div注册并执行JS

问题描述 投票：0回答：1

我有一组按钮，单击它们时不会 console.log 。它们嵌套在几个 div 中，并通过另一个函数附加。单击 .finger 按钮时，它们不会变为活动状态，即使它们应该在单击时通过 CSS 更改其背景颜色。即使通过 CSS 指定，.stopButton 也不会变为活动状态/更改其背景颜色。单击 .startButton 后，会附加这些新按钮并起作用。

下面是我的代码。如果您需要其余部分，请告诉我。

JS（使用 JQuery）

//What will happen when the start button is pressed. Basically, reset everything
//and take to first stage of game. Must clear the Start Button and title if pressed.
function startButtonPressed(indexStartButton){
    hideStartScreenEle(indexStartButton);
    startGame();
}


//Hides display of startScreen ele
function hideStartScreenEle(indexStartButton){
    $(".startScreen").eq(0).css("display", "none");
    $(".startButton").eq(indexStartButton).css("display", "none");
}


//Sets up game, assumes everything else is already hidden
function startGame(){
    //Appends the flex containers
    $(".appendToMe").append("<div class='handHolder'><div class='fingerHolder'></div></div>");
    //Appends the thumb
    $(".fingerHolder").append("<button class= 'fingerButton thumb'></button>");
    //Appends the other fingers
    for (let i = 0; i < 1; i++) {
        $(".fingerHolder").append("<button class='fingerButton'></button>");
    }

    //Appends the stop button
    $(".appendToMe").append("<button class='stopButton'>Stop?</button>");
}

//Original button that runs the function that appends the rest of the buttons. Works
//After being pressed, it and the div it is contained in have their display changed to none
$(".startButton").on("click", function() {
    startButtonPressed($(this).index(".startButton"));
} );

//One stop button. Does not work, but becomes active.
$(".stopButton").on("click", function() {
    console.log("stop button pressed");
} );

//There are five fingers, each is a button. Does not work when clicked, but becomes active.
$(".fingerButton").on("click", function() {
    console.log("finger clicked");
} );

CSS

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: chartreuse;
}

.startScreen {
    text-align: center;
    width: 100vw;
    background: blue;
}

.startButtonDiv {
    background: yellow;
}

.startButton {
    width: 20vw;
    height: 20vh;
    background: red;
}

.appendToMe {
    width: 100vw;
    text-align: center;
    background: cyan;
    pointer-events: none;
}

.handHolder {
    background: steelblue;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width:760px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    pointer-events: none;
}

.thumb {
    width: 200px;
    background: goldenrod;
}

.fingerButton {
    pointer-events: all;
    width: 140px;
    height: 340px;
    background: burlywood;
    border-width: 0px;
}

.fingerButton:active {
    background: orange;
}

.stopButton{
    background: firebrick;
    font-size: 80px;
    width: 10vw;
    height: 10vh;
}

.stopButton:active {
    background: blue;
}

页面加载时的 HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Free Your Fingers 2.0.0</title>
        <script  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
        <script type="text/javascript" src="../js/freeYourFingers_2_0_0.js" defer></script>
        <link rel="stylesheet" type="text/css" href="../css/freeYourFingers_2_0_0.css">
    </head>
    <body>
        <div class="appendToMe"></div>
        <div class="startScreen">
            <div class="startButtonDiv">
                <button class="startButton">Start</button>
            </div>
        </div>
    </body>
</html>


//What will happen when the start button is pressed. Basically, reset everything
//and take to first stage of game. Must clear the Start Button and title if pressed.
function startButtonPressed(indexStartButton) {
  hideStartScreenEle(indexStartButton);
  startGame();
}


//Hides display of startScreen ele
function hideStartScreenEle(indexStartButton) {
  $(".startScreen").eq(0).css("display", "none");
  $(".startButton").eq(indexStartButton).css("display", "none");
}


//Sets up game, assumes everything else is already hidden
//Creates div with 2 fingers
function startGame() {
  //Appends the flex containers
  $(".appendToMe").append("<div class='handHolder'><div class='fingerHolder'></div></div>");
  //Appends the thumb
  $(".fingerHolder").append("<button class= 'fingerButton thumb'></button>");
  //Appends the other fingers
  for (let i = 0; i < 1; i++) {
    $(".fingerHolder").append("<button class='fingerButton'></button>");
  }
  //Appends the stop button
  $(".appendToMe").append("<button class='stopButton'>Stop?</button>");
}

//Original button that runs the function that appends the rest of the buttons. Works
//After being pressed, it and the div it is contained in have their display changed to none
$(".startButton").on("click", function() {
  startButtonPressed($(this).index(".startButton"));
});

//One stop button. Does not work, but becomes active.
$(".stopButton").on("click", function() {
  console.log("stop button pressed");
});

//There are five fingers, each is a button. Does not work when clicked, but becomes active.
$(".fingerButton").on("click", function() {
  console.log("finger clicked");
});
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: chartreuse;
}

.startScreen {
  text-align: center;
  width: 100vw;
  background: blue;
}

.startButtonDiv {
  background: yellow;
}

.startButton {
  width: 20vw;
  height: 20vh;
  background: red;
}

.appendToMe {
  width: 100vw;
  text-align: center;
  background: cyan;
  pointer-events: none;
}

.handHolder {
  background: steelblue;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  width: 760px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  pointer-events: none;
}

.thumb {
  width: 200px;
  background: goldenrod;
}

.fingerButton {
  pointer-events: all;
  width: 140px;
  height: 340px;
  background: burlywood;
  border-width: 0px;
}

.fingerButton:active {
  background: orange;
}


.stopButton {
  background: firebrick;
  font-size: 80px;
  width: 10vw;
  height: 10vh;
}

.stopButton:active {
  background: blue;
}

.mission{
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: chocolate;
  width: 70vw;
}
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<div class="appendToMe"></div>
<div class="startScreen">
  <div class="gameTitle">
    <h1>Free Your Fingers</h1>
  </div>
  <div class="startButtonDiv">
    <button class="startButton">Start</button>
  </div>
</div>

我尝试过更改不同 div 的可见性。父 div 设置为隐藏，而需要按下的按钮设置为可见。这并没有导致任何改变。

当我将父项的指针事件设置为 none 并将按钮的指针事件设置为 all 时，按钮变为活动状态（更改其背景颜色），但不执行任何代码。

当我将父母的可见性设置为隐藏，按钮的可见性设置为可见，父母的指针事件设置为无，按钮的指针事件设置为全部时，按钮将变为活动状态（更改背景）颜色），但不会执行代码。

我也尝试过 event.stopPropagation()，但我很可能没有正确实现它，并且愿意尝试涉及它的其他解决方案。

我尝试使用 .remove() 完全删除 .startScreen。这对问题没有任何影响。

我尝试在不同级别的 div 上实现不同的 console.logs。看来该点击正在注册appendToMe div，而不是子级。

javascript jquery button onclick jquery-events
1个回答
0
投票

想通了。您可以比较 event.target 和 this。这将是 .appendToMe div，但事件的目标将是子按钮。 event.target 的结果是目标的 DOM 元素。

您可以通过获取事件目标的 .classList 并检查它是否包含按钮的类之一来使按钮执行您想要的 JS。如果是的话，您可以将所需的代码放在 if 语句的相应分支下。

$(".appendToMe").on("click", function(event) {
    if (event.target !== this)
        var targetClassList = event.target.classList;
        if (targetClassList.contains('fingerButton') == true) {
            console.log("Clicked a finger");
            return;
        } else if (targetClassList.contains("stopButton") == true) {
            console.log("Clicked the stop button");
            return;
        } else {
            console.log("Something else");
        }
        return;
    alert("Clicked only on .appendToMe");
} );

如果某一类有多个按钮，并且您希望每个按钮具有不同的效果，但又不想为每个按钮指定 ID，则可以使用 .获取（索引）。从那里，您可以通过在 DOM 元素列表上使用 .indexOf(event.target) 来获取元素的索引。

如果我错了或者有需要改进的地方，请添加到这个答案中。这可能不是最理想的解决方案，但它确实有效。

$(".appendToMe").on("click", function(event) {
    if (event.target !== this)
        var targetClassList = event.target.classList;
        if (targetClassList.contains('fingerButton') == true) {
            console.log("Clicked a finger");
            var everyFinger = [];
            for (let i = 0; i < 5; i++) {
                everyFinger.push($(".fingerButton").get(i));
            } 
            fingerIndex = everyFinger.indexOf(event.target);
            console.log("fingerIndex: " + fingerIndex);
            return;
        } else if (targetClassList.contains("stopButton") == true) {
            console.log("Clicked the stop button");
            return;
        } else {
            console.log("Something else");
        }
        return;
    alert("Clicked only on .appendToMe");
} );
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.