我是javascript的新手，我正在使用js制作一些自定义视频控件。我有一个带有静音/取消静音图标的span元素，当悬停在子元素上时会出现输入范围栏以选择所需的valume级别。问题是，每当我单击子元素（输入类型范围栏）时，父元素的图标都会更改，并且每次单击时音量都会静音和取消静音。我该如何解决这个问题？
<html>
<span id ="volbtn" class = "fas fa-volume-up">
<input type ="range" value = "1" min ="0" max ="1" volume ="1" step="0.1" id ="volbar"/>
</span>
</html>
事件监听器：
volCtrl.addEventListener("click", muteVolume);
function muteVolume () {
if (video.muted) {
video.muted = false;
volCtrl.removeAttribute("fa-volume-up");
volCtrl.setAttribute("class", "fas fa-volume-mute");
}
else {
video.muted = true;
volCtrl.removeAttribute("fa-volume-mute");
volCtrl.setAttribute("class", "fas fa-volume-up");
}
}
你的input被包裹在span中 - 因此在输入时点击事件气泡直到父SPAN触发静音。
我将使用较旧的fa图标，但可以根据新的fas规范修改CSS。
JavaScript示例非常明显，但如果您遇到问题，请随时寻求指导！
不要错过新推出的.is-muted和.is-paused CSS课程！
这就是the JS's classList.toggle()的诀窍
遵循以下规则：
video元素属性。video element独家处理：const video = document.getElementById('video');
const playBtn = document.getElementById('playBtn');
const muteBtn = document.getElementById('muteBtn');
const volBar = document.getElementById('volBar');
// CUSTOM UI ELEMENTS EVENTS
// They should only change the `video` properties!
// REMEMBER: we don't handle the UI appearance here
playBtn.addEventListener('click', () => {
video[video.paused?'play':'pause']();
});
muteBtn.addEventListener('click', () => {
if (!video.volume) return; // Do nothing if there's no volume whatsoever
video.muted = !video.muted; // Toggle muted state
});
volBar.addEventListener('input', (evt) => {
video.volume = evt.target.value;
});
// VIDEO EVENTS - AND UI STYLES
// Triggered on video property value change
// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
video.addEventListener('play', handlePlayPauseUI );
video.addEventListener('ended', handlePlayPauseUI );
video.addEventListener('pause', handlePlayPauseUI );
video.addEventListener('volumechange', handleVolumeUI );
// TODO: Handle also 'progress', 'ratechange', etc...
function handlePlayPauseUI () {
playBtn.classList.toggle('is-playing', !video.paused);
}
function handleVolumeUI() {
volBar.value = video.muted ? 0 : video.volume;
muteBtn.classList.toggle('is-muted', video.muted || !video.volume);
}video {display: block; max-width: 500px;}
.fa {
user-select: none;
cursor: pointer;
}
.fa.is-muted:before{ /* I used .fa, you use .fas */
font-family: "FontAwesome"; /* Fix also the family name if needed */
content: "\f026"; /* HEX for the "mute" icon (find yours in the cheatsheet CSS docs)*/
}
.fa.is-playing:before {
font-family: "FontAwesome";
content:"\f04c"; /* set here the HEX for pause icon */
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<video id="video" autobuffer controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
</video>
<span id="playBtn" class="fa fa-fw fa-play"></span>
<span id="muteBtn" class="fa fa-fw fa-volume-up"></span>
<input id="volBar" type="range" value="1" min="0" max="1" volume="1" step="0.1">由于采用了上述方法，如果您操纵video默认UI处理程序或自定义UI的处理程序，则没有任何区别。
通过学到的这一课，您现在可以为“progress”，“ratechange”和其他VideoElement事件添加缺少的函数，最后从HTML controls元素中删除video属性。