Javascript 将eventListener添加到按钮以更改MouseUp/down上的类

我有几个红色和黑色按钮，我想将“onmousedown”和“onmouseup”事件添加到共享同一类的红色按钮集（“按钮红色”）

onmousedown我想更改添加类“不透明”，onmouseup再次删除它

因此，onmousedown“选中”的红色按钮变得略微透明，onmouseup恢复正常（红色）。其他按钮不受影响

css

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px; 
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}

javascript（到目前为止）

var classname=this.document.getElementsByClassName（“按钮红色”）；
对于（var i=0；i

---

getElementByClassName

应该是

getElementsByClassName

您需要传递一个函数作为事件侦听器的第二个参数

您需要为

classList

属性提供上下文

事件的正确名称是

mousedown

和

mouseup

CSS属性需要以分号结尾

CSS选择器不正确

---

您只能使用CSS来实现这一点

按钮{
填充：0.5雷姆1雷姆；
背景颜色：浅灰色；
边框：1px纯色灰色；
}
按钮：激活{
背景颜色：鲑鱼；
不透明度：0.5；
}

---

点击我可以使用css，但这里有一个解决方案，可以在鼠标上下移动时添加jquery侦听器


$（'.button'+'.red'）。每个（函数（）{
$（this.mousedown（function（））{
$（this.toggleClass（'不透明'）；
});
$（this.mouseup（function（））{
$（this.toggleClass（'不透明'）；
});
});
。按钮{
背景色：黑色；
颜色：白色；
高度：30px；
宽度：150px；
文本对齐：居中；
}
瑞德先生{
背景色：红色；
}
布莱克先生{
背景色：黑色；
}
.不透明{
不透明度：0.7；
}

按钮
按钮

不需要迭代（循环）
将按钮包装在
标签中
使用访问按钮
仅为20个红色按钮使用了两个EventListener，通过使用

通过属性制作CSS动画

演示

var form=document.forms.main；
表单.addEventListener（'mousedown'，fade，false）；
表格.addEventListener（'mouseup'，fade，false）；
功能衰减（e）{
如果（e.target！==e.currentTarget）{
e、 target.classList.toggle（'opq'）；
}
}
.btn{
背景色：黑色；
颜色：白色；
高度：30px；
宽度：50px；
文本对齐：居中；
不透明度：1；
光标：指针；
边界半径：10px；
过渡：所有。5s轻松；
}
瑞德先生{
背景色：红色；
过渡：全部。5秒轻松
}
.btn.red.opq{
不透明度：0.7；
过渡：全部。5秒轻松
}

红色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
黑色
红色
黑色
红色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
黑色
红色
黑色
红色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
红色
黑色
黑色
欢迎来到Stack Overflow，您的问题应该包含以下内容。FWIW您可以使用CSS来实现这一点。你用JS这么做有什么原因吗？你能添加你的HTML吗？你的选择器错了
.button red不透明
查找
元素（非类），这些元素是使用
按钮
类的元素的后代。它应该是
.button.red.不透明的
。与
.button red
选择器相同。
“button red”
不是类的有效名称
getElementsByClassName
不支持同时通过多个类名进行选择，请使用
querySelectorAll（）
和正确的CSS选择器进行选择。而
.button red不透明
表示
节点内的
节点内的某个节点具有类
按钮
。您可能是指
.button.red.opaque
getElementsByClassName
支持多个类名：这也行不通。将得到一个无法读取未定义类列表的错误。正确，我刚刚修复了它。这是一个好的解决方案，但没有回答OP关于其代码的问题。很好，但没有回答实际问题。是的，我将在后面添加JS解决方案。您可以执行
.button.red
而不是
'.button'+'.red'
和缓存
$（此）
而不是重复调用它。不必将按钮包装在
标记中。如果您使用HTMLFormControlsCollection，当OP扩展到按钮之外时，这是非常容易处理表单的必要方法。另外，为了利用冒泡（事件委派，可以对包含无限数量event.targets的事件使用单个eventlistener），有必要将按钮包装在一个公共祖先中。这可能是真的，但是如果按钮分布在整个页面上会怎么样呢？我也喜欢事件委托，但是如果在祖先中有多个来自不同元素的
mouseup
和
mousedown
事件呢？使用此
e.target.classList.toggle（'opq'，！e.target.classList.contains（'opq'））
，谢谢更新。
e.stopPropagation（）
用于混合事件和自定义的
eventTrigger（）
，如果它真的很混乱（这意味着我可能继承了某人的混乱）。
var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
   classname[i].addEventListener('onmousedown', classList.add("opaque"), false);
   classname[i].addEventListener('onmouseup', classList.remove("opaque"), false);
}

var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
  classname[i].addEventListener('mousedown', function () {
    this.classList.add("opaque")
  }, false);
  classname[i].addEventListener('mouseup', function () {
    this.classList.remove("opaque")
  }, false);
}

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px;
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}