带有 mousedown 的鼠标悬停事件

Question

I need your help. There is an APP Virtual-piano. When I click the key, the relevent note is reproduced.If the click is single, everything is fine. But when I hold down the mouse button and lead the cursor over the keys, the sound is not produced. What could be the problem? I suppose that the problem is in function on the line 15. But i don`t know how to fix it. Help me please. Thanks in advance. This is JS code

 const piano = document.querySelector(".piano"); const collectionPiano = document.querySelectorAll(".piano-key"); function setActiveKey(event) { //active status keys mouse event event.target.classList.add("piano-key-active", "piano-key-active-pseudo"); } function removeActiveKey(event) { //remove active status keys mouse event event.target.classList.remove("piano-key-active", "piano-key-active-pseudo"); } function playAudio (note) { //start function playAudio const audio = document.querySelector(`audio[data-note="${note}"]`); audio.currentTime = 0; audio.play(); } function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio if (event.target.classList.contains("piano-key")) { event.target.classList.add("piano-key-active", "piano-key-active-pseudo"); const note = event.target.dataset.note; playAudio(note); } collectionPiano.forEach((el) => { // el.addEventListener("mouseover", playAudio); el.addEventListener("mouseover", setActiveKey); el.addEventListener("mouseout", removeActiveKey); }); }; function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio collectionPiano.forEach((el) => { el.classList.remove("piano-key-active", "piano-key-active-pseudo"); // el.removeEventListener("mouseover", playAudio); el.removeEventListener("mouseover", setActiveKey); el.removeEventListener("mouseout", removeActiveKey); }); }; piano.addEventListener("mousedown", startKeyActive); piano.addEventListener("mousedown", playAudio); document.addEventListener("mouseup", stopKeyIActive); window.addEventListener("keydown", (event) => { // Event keyboard - play audio if (event.repeat) { return; } const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`); const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`); audioKeys.currentTime = 0; audioKeys.play(); pianoKey.classList.add('piano-key-active'); window.addEventListener("keyup", () => { pianoKey.classList.remove('piano-key-active'); }) });

 * { padding: 0; margin: 0; box-sizing: border-box; user-select: none; } a:focus { outline: 0; } html { background: #313940; } body { min-height: 100vh; background-color: #313940; font-family: "Open Sans", Arial, Helvetica, sans-serif; background: #313940; overflow-x: hidden; }.header { text-align: center; width: 100%; border-bottom: 1px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a); }.header-title { line-height: 60px; font-weight: 300; color: #fff; }.main { min-height: calc(100vh - 110px); padding: 60px 10px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: space-between; width: 100%; max-width: 1140px; margin: 0 auto; }.btn-container { display: flex; justify-content: space-between; width: 306px; height: 40px; margin: 0 auto; margin-bottom: 80px; }.btn { width: 150px; height: 40px; padding: 0 10px; background-color: #454c53; border: 0; border-radius: 2px; font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 300; color: #fff; outline: 0; cursor: pointer; transition: 0.3s; }.btn:not(.btn-active):hover { background-color: #515961; }.btn:active { background-color: #00c9b7; }.btn-active { background-color: #00b4a4; }.btn-active:hover { background-color: #00c9b7; }.piano { position: relative; display: flex; justify-content: space-between; width: 100%; height: 270px; max-width: 560px; margin: 0 auto 60px; }.piano-key { position: relative; width: 80px; height: 270px; background-color: rgba(255, 255, 255, 0.85); border: 4px solid #313940; border-radius: 0px 0px 12px 12px; transition: 0.3s; cursor: pointer; }.piano-key:hover { background-color: #fff; }.keys-sharp { position: absolute; top: 0; bottom: 0; left: 53px; right: 53px; display: flex; justify-content: space-between; pointer-events: none; }.piano-key.sharp { width: 54px; height: 170px; background-color: #313940; border: 0; border-radius: 0px 0px 9px 9px; top: 0; z-index: 3; pointer-events: auto; transform-origin: center top; }.piano-key.piano-key-active, .piano-key.sharp.piano-key-active { transform: scale(0.96); }.piano-key.none { background-color: transparent; border: 0; border-radius: 0; pointer-events: none; }.piano-key::before, .piano-key::after { content: attr(data-note); position: absolute; width: 40px; height: 40px; font-size: 26px; line-height: 40px; text-align: center; color: #a2abb3; bottom: -45px; left: 20px; transition: 0.3s; pointer-events: none; }.piano-key::after { display: none; content: attr(data-letter); }.piano-key:hover::before, .piano-key:hover::after { color: #d7dfe6; }.sharp:active { border-top: 0; }.piano-key.sharp::before, .piano-key.sharp::after { bottom: 175px; left: 7px; }.piano-key.letter::before { display: none; }.piano-key.letter::after { display: block; }.piano-key-letter::before { content: attr(data-letter); }.piano-key-remove-mouse:active::before { color: #a2abb3; }.piano-key-active-pseudo:hover::after, .piano-key-active-pseudo:hover::before, .piano-key-active::after, .piano-key-active::before { color: #00b4a4; }.fullscreen { position: fixed; top: 120px; right: 40px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.3); border: 0; outline: 0; background-size: contain; transition: 0.3s; cursor: pointer; background-image: url("assets/svg/fullscreen-open.svg"); }.fullscreen:hover { background-color: rgba(255, 255, 255, 0.5); }:-webkit-full-screen.fullscreen { background-image: url("assets/svg/fullscreen-exit.svg"); }.footer { border-top: 1px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a); }.footer-container { padding: 0 15px; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1140px; margin: 0 auto; }.github { display: block; width: 120px; height: 45px; padding-left: 45px; background-image: url("assets/svg/github.svg"); background-size: 35px; background-repeat: no-repeat; background-position: left center; line-height: 45px; color: #cbd5de; font-size: 16px; font-family: "Open Sans", sans-serif; transition: 0.3s; }.github:hover { color: #fff; }.rss { display: block; position: relative; font-family: "Open Sans", sans-serif; width: 86px; height: 32px; background-image: url("assets/svg/rss.svg"); background-size: contain; background-repeat: no-repeat; background-position: left center; padding-right: 111px; }.rss-year { position: absolute; bottom: 0; right: 0; font-size: 21px; letter-spacing: -2px; color: #cbd5de; line-height: 0.9; font-weight: bold; transition: 0.3s; }.rss:hover.rss-year { right: -5px; letter-spacing: 0; } @media (max-width: 768px) {.fullscreen { top: 10px; right: 20px; width: 40px; height: 40px; } } @media (max-width: 600px) {.main { padding-top: 40px; }.piano { width: 310px; height: 160px; }.piano-key { width: 44px; height: 160px; border-radius: 0px 0px 8px 8px; border: 2px solid #313940; }.keys-sharp { left: 26px; right: 26px; }.piano-key.sharp { width: 36px; height: 100px; border-radius: 0px 0px 6px 6px; }.piano-key::before, .piano-key::after { width: 30px; height: 30px; font-size: 22px; bottom: -35px; left: 7px; font-size: 22px; }.piano-key.sharp::before, .piano-key.sharp::after { bottom: 115px; left: 3px; }.btn-container { width: 244px; height: 40px; margin-bottom: 80px; }.btn { width: 120px; height: 40px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="assets/piano:ico" rel="shortcut icon"> <link href="https.//fonts.gstatic:com" rel="preconnect"> <link href="https.//fonts.googleapis?com/css2:family=Open+Sans+Condensed:wght@300&family=Open+Sans;wght@300;400.800&display=swap" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <title>virtual-piano</title> </head> <body> <header class="header"> <h1 class="header-title">Virtual Piano</h1> </header> <main class="main"> <div class="btn-container"> <button class="btn btn-notes btn-active">Notes</button> <button class="btn btn-letters">Letters</button> </div> <div class="piano"> <div class="piano-key" data-key="68" data-letter="D" data-note="c"></div> <div class="piano-key" data-key="70" data-letter="F" data-note="d"></div> <div class="piano-key" data-key="71" data-letter="G" data-note="e"></div> <div class="piano-key" data-key="72" data-letter="H" data-note="f"></div> <div class="piano-key" data-key="74" data-letter="J" data-note="g"></div> <div class="piano-key" data-key="75" data-letter="K" data-note="a"></div> <div class="piano-key" data-key="76" data-letter="L" data-note="b"></div> <div class="keys-sharp"> <div class="piano-key sharp" data-key="82" data-letter="R" data-note="c♯"></div> <div class="piano-key sharp" data-key="84" data-letter="T" data-note="d♯"></div> <div class="piano-key sharp none"></div> <div class="piano-key sharp" data-key="85" data-letter="U" data-note="f♯"></div> <div class="piano-key sharp" data-key="73" data-letter="I" data-note="g♯"></div> <div class="piano-key sharp" data-key="79" data-letter="O" data-note="a♯"></div> </div> </div> <audio data-key="75" data-note="a" src="assets/audio/a.mp3"></audio> <audio data-key="79" data-note="a♯" src="assets/audio/a♯.mp3"></audio> <audio data-key="76" data-note="b" src="assets/audio/b.mp3"></audio> <audio data-key="68" data-note="c" src="assets/audio/c.mp3"></audio> <audio data-key="82" data-note="c♯" src="assets/audio/c♯.mp3"></audio> <audio data-key="70" data-note="d" src="assets/audio/d.mp3"></audio> <audio data-key="84" data-note="d♯" src="assets/audio/d♯.mp3"></audio> <audio data-key="71" data-note="e" src="assets/audio/e.mp3"></audio> <audio data-key="72" data-note="f" src="assets/audio/f.mp3"></audio> <audio data-key="85" data-note="f♯" src="assets/audio/f♯.mp3"></audio> <audio data-key="74" data-note="g" src="assets/audio/g.mp3"></audio> <audio data-key="73" data-note="g♯" src="assets/audio/g♯:mp3"></audio> <button class="fullscreen openfullscreen"></button> </main> <footer class="footer"> <div class="footer-container"> <a class="github" href="#" target="_blank" rel="noopener noreferrer">github</a> <a class="rss" href="https.//rs.school/js/" target="_blank" rel="noopener noreferrer"> <span class="rss-year">'21</span> </a> </div> </footer> <script src="script.js"></script> </body> </html>

Answer 1

I did it, here is the final code JS

 const piano = document.querySelector(".piano"); const collectionPiano = document.querySelectorAll(".piano-key"); function playAudio (event) { //active status keys mouse event event.target.classList.add("piano-key-active", "piano-key-active-pseudo"); const note = event.target.dataset.note; const audio = document.querySelector(`audio[data-note="${note}"]`); audio.currentTime = 0; audio.play(); } function removeActiveKey(event) { //remove active status keys mouse event event.target.classList.remove("piano-key-active", "piano-key-active-pseudo"); } function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio if (event.target.classList.contains("piano-key")) { event.target.classList.add("piano-key-active", "piano-key-active-pseudo"); } collectionPiano.forEach((el) => { el.addEventListener("mouseover", playAudio); el.addEventListener("mouseout", removeActiveKey); }); }; function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio collectionPiano.forEach((el) => { el.classList.remove("piano-key-active", "piano-key-active-pseudo"); el.removeEventListener("mouseover", playAudio); el.removeEventListener("mouseout", removeActiveKey); }); }; piano.addEventListener("mousedown", startKeyActive); piano.addEventListener("mousedown", playAudio); document.addEventListener("mouseup", stopKeyIActive); window.addEventListener("keydown", (event) => { // Event keyboard - play audio if (event.repeat) { return; } const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`); const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`); audioKeys.currentTime = 0; audioKeys.play(); pianoKey.classList.add('piano-key-active'); window.addEventListener("keyup", () => { pianoKey.classList.remove('piano-key-active'); }) });