Текст внутри кнопки не действует как часть кнопки?

ProgramBox

Текст внутри кнопки не действует как часть кнопки?

Post author:admin
Запись опубликована:24 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Скоро я выпущу альбом, поэтому решил сделать для него промо-сайт. Веб-сайт будет очень простым: в основном список кнопок, каждая из которых содержит название песни и кнопку воспроизведения для предварительного просмотра этой песни. Кроме того, при нажатии на любую кнопку я хочу, чтобы открывалось всплывающее окно. Я довольно неопытен, но мне удалось добиться всего этого. Единственная проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю на название любой песни в кнопке, которая находится внутри тега P, всплывающее окно не открывается. Кажется, это работает только в том случае, если я нажимаю на фон кнопки, а я этого не хочу.

Кроме того, нечто подобное происходит, когда открывается всплывающее окно: я запрограммировал всплывающее окно на закрытие, если пользователь нажимает за пределами всплывающего окна. И это работает! Но он также закрывается, если я нажимаю на текст внутри всплывающего окна.

Я не уверен, почему это происходит (возможно, из-за того, как я использовал прослушиватели событий в своем JS), но я был бы очень признателен, если бы кто-нибудь мог сказать мне, как заставить текст в кнопке действовать как часть кнопки и как избежать того, чтобы нажатие любого текста во всплывающем окне закрывало его.

Я оставлю здесь фрагмент со всем своим кодом.

 var song1 = document.getElementById("SoloYoPreview");
var playbutton1 = document.getElementById("playbutton1");
var button1 = document.getElementById("button1");
var toggle1 = 0;

var song2 = document.getElementById("LaNocheEnteraPreview");
var playbutton2 = document.getElementById("playbutton2");
var button2 = document.getElementById("button2");
var toggle2 = 0;

var song3 = document.getElementById("QueTalSiVamosPreview");
var playbutton3 = document.getElementById("playbutton3");
var button3 = document.getElementById("button3");
var toggle3 = 0;

var song4 = document.getElementById("EsUnRegaloPreview");
var playbutton4 = document.getElementById("playbutton4");
var button4 = document.getElementById("button4");
var toggle4 = 0;

var song5 = document.getElementById("NoMeQuieroMentirPreview");
var playbutton5 = document.getElementById("playbutton5");
var button5 = document.getElementById("button5");
var toggle5 = 0;

function ctrl_song(number, command = "") {
    var thissong = window["song" number];
    var thisplaybutton = window["playbutton" number];
    var thisbutton = window["button" number];
    var thistoggle = window["toggle" number];

    if (command == "stop") {
        window["toggle" number] = 2;
        thisbutton.style.animationPlayState = "paused";
        thisplaybutton.src = "../../Icons/replay_circle_filled_black_48dp.svg";
        /*
        console.log("stopping");
        */

    } else if (command == "pause" || thistoggle == 1 ) {
        window["toggle" number] = 0;
        thisbutton.style.animationPlayState = "paused";
        thissong.pause();
        thisplaybutton.src = "../../Icons/play_circle_filled_black_48dp.svg";
        /*
        console.log("pausing");
       */
        
    } else if (command == "restart" || thistoggle == 2) {
        window["toggle" number] = 1;

        thisbutton.style.animationPlayState = "running";
        thissong.currentTime = 0;
        thissong.play();
        thisplaybutton.src = "../../Icons/pause_circle_filled_black_48dp.svg";
        /*
        console.log("restarting");
        */

    } else if (command == "play" || thistoggle == 0) {
        
        for (var i = 1;; i  ) {
            try {
                window["toggle" i] = 0;
                var fbutton = window["button" i];
                fbutton.style.animationPlayState = "paused";
                var fsong = window["song" i];
                fsong.pause();
                var fplaybutton = window["playbutton" i];
                fplaybutton.src = "../../Icons/play_circle_filled_black_48dp.svg";
            } catch (e) {
                break;
            }
            
        }

        window["toggle" number] = 1;

        thisbutton.style.animationPlayState = "running";
        thissong.play();
        thisplaybutton.src = "../../Icons/pause_circle_filled_black_48dp.svg";
        /*
        console.log("playing");
        */

    }
}

document.addEventListener("click", function(e){
    var sindex = e.target.dataset.sindex;
    ctrl_song(sindex);
});
document.addEventListener("animationiteration", function(e) {
    var sindexb = e.target.dataset.sindexb;
    ctrl_song(sindexb, "stop");
});









var popup = document.getElementById("popupid");
var popupshadow = document.getElementById("popupshadow");

function togglePopup(songtitle = "") {
    document.querySelector("#popuptitle").innerHTML = songtitle;
    popup.classList.toggle("show");
    popupshadow.classList.toggle("show");
}
window.onclick = function(event) {
    
    if (popup.className == "popup show" amp;amp; event.target !== popup amp;amp; event.target.className !== "songbuttons") {
        togglePopup();
    }    
}

 @import url('https://fonts.googleapis.com/css2?family=Montserratamp;display=swap');
/* width */
::-webkit-scrollbar {
    width: 10px;
}
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
}
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

body {
    margin: 0px;
    background-color: #f1f1f1;
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    position: relative;
}
#blurredbanner {
    width: auto;
    background-image: url("InflamaArtworkBlur.jpg");
    background-size: 100%;
    background-position: center;
}
#albumcover {
    width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
p {
    margin-block-start: 0.67em;
    color: #111111;
}
h1 {
    margin-block-start: 0.67em;
    margin-bottom: 0px;
    letter-spacing: 15px;

    color: #111111;
}
#title {
    text-align: center;
}
#links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
button {
    text-decoration: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    text-align: center;
    position: relative;

    border: 1px solid #111111;
    background-repeat: no-repeat;
    color: #111111;
    border-radius: 50px;

    font-size: 0.67em;

    margin-block-start: 45px;
    height: 60px;
    width: 50%;

    transition: 0.4s;

    background-image: linear-gradient( rgba(200,200,200,0.75), rgba(174,174,174,0.75) );
    -webkit-animation: progressbar 30s linear;
    animation: progressbar 30s linear infinite;
}
button:hover {
    transform: translate(0px, -8px);
}
@keyframes progressbar {
    0% {
        background-size: 0%;
    }
    100% {
        background-size: 100%;
    }
}
#button1 {
    animation-play-state: paused;
}
#button2 {
    animation-play-state: paused;
}
#button3 {
    animation-play-state: paused;
}
#button4 {
    animation-play-state: paused;
}
#button5 {
    animation-play-state: paused;
}
.songtitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    margin-block-start: 0px;
}
.popup {
    position: fixed;
    z-index: 2;
    visibility: hidden;
    
    top: 150%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #ffffffaf;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    width: 25%;
    height: 50%;
    text-align: center;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: 0.4s;
}
.popup h1 {
}
.popup.show {
    visibility: visible;
    top: 50%;
    width: 75%;
}
.popupshadow {
    background-color: #1111118f;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    visibility: hidden;
    opacity: 0;
    transition: 0.6s;
}
.popupshadow.show {
    opacity: 1;
    visibility: visible;
}

 <!DOCTYPE html>
<HEAD>
    <TITLE>Inflama by Dherrera</TITLE>
    <LINK rel="stylesheet" href="genericpromo.css">
</HEAD>
<BODY>
    <DIV class="popupshadow" id="popupshadow"></DIV>

    <DIV id="blurredbanner">
        <IMG id="albumcover" src="InflamaArtwork.jpg">
    </DIV>

    <DIV id="title">
        <H1>Inflama</H1>
        <P>by Dherrera</P>
    </DIV>
    
    <DIV class="popup" id="popupid">
        <H1 id="popuptitle"></H1>
        <P>by Dherrera</P>
    </DIV>
    
    <DIV id="links">
        <button class="songbuttons" id="button1" data-sindexb="1" onclick="togglePopup('Solo Yo')">
            <audio id="SoloYoPreview">
                <source src="audio/SoloYoPreview.mp3" type="audio/mpeg">
            </audio>

            <img id="playbutton1" data-sindex="1" src="../../Icons/play_circle_filled_black_48dp.svg" >
            <P class="songtitle">Solo Yo</P>
        </button>

        <button class="songbuttons" id="button2" data-sindexb="2" onclick="togglePopup('La Noche Entera')">
            <audio id="LaNocheEnteraPreview">
                <source src="audio/LaNocheEnteraPreview.mp3" type="audio/mpeg">
            </audio>

            <img id="playbutton2"  data-sindex="2" src="../../Icons/play_circle_filled_black_48dp.svg">
            <P class="songtitle">La Noche Entera</P>
        </button>

        <button class="songbuttons" id="button3" data-sindexb="3" onclick="togglePopup('Que Tal Si Vamos')">
            <audio id="QueTalSiVamosPreview">
                <source src="audio/QueTalSiVamosPreview.mp3" type="audio/mpeg">
            </audio>

            <img class="playbtns" id="playbutton3"  data-sindex="3" src="../../Icons/play_circle_filled_black_48dp.svg">
            <P class="songtitle">Que Tal Si Vamos</P>
        </button>

        <button class="songbuttons" id="button4" data-sindexb="4" onclick="togglePopup('Es Un Regalo')">
            <audio id="EsUnRegaloPreview">
                <source src="audio/EsUnRegaloPreview.mp3" type="audio/mpeg">
            </audio>

            <img id="playbutton4"  data-sindex="4" src="../../Icons/play_circle_filled_black_48dp.svg">
            <P class="songtitle">Es Un Regalo</P>
        </button>

        <button class="songbuttons" id="button5" data-sindexb="5" onclick="togglePopup('No Me Quiero Mentir')">
            <audio id="NoMeQuieroMentirPreview">
                <source src="audio/NoMeQuieroMentirPreview.mp3" type="audio/mpeg">
            </audio>

            <img id="playbutton5"  data-sindex="5" src="../../Icons/play_circle_filled_black_48dp.svg">
            <P class="songtitle">No Me Quiero Mentir</P>
        </button>
    </DIV>
    
<!--SCRIPT-->
<SCRIPT src="genericpromov2.js"></SCRIPT>

</BODY>
</html>

Заранее спасибо!

Ответ №1:

Единственная проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю на название любой песни в кнопке, которая находится внутри <p> тега, всплывающее окно не открывается

Вам нужно добавить этот стиль в свой CSS:

 .songtitle {
  pointer-events: none;
}

Это означает , что если кто-то нажмет на <p> внутреннюю <button> часть, то это будет тот <button> , который зарегистрирует щелчок, а не тот <p> .

Дальнейшее Чтение:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

1. То же самое следует добавить для h1 и p внутри всплывающего окна, чтобы оно не закрывалось при нажатии на текст внутри него.

2. Вау, большое спасибо! Как глупо с моей стороны, это была довольно серьезная проблема. Но я действительно ценю ваше терпение по отношению ко мне!

3. Не беспокойтесь, @DiegoHernandezHerrera — мы все здесь, чтобы учиться. pointer-events это действительно полезное свойство CSS, но есть много веб-разработчиков (часто тех, кто больше внимания уделяет интерфейсным фреймворкам javascript), которые с ним не сталкивались.

Метки: Текст внутри кнопки не действует как часть кнопки?