将eventListener添加到按钮以更改类onmouseup/down

Question

我有几个红色和黑色按钮,我想将"onmousedown"和"onmouseup"事件添加到共享同一类("按钮红色")的红色按钮组.

onmousedown我想更改添加类"opaque"和onmouseup再次删除它.

因此,已经"选中"的红色按钮变得稍微透明,并且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("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);
}

Answer 1

您只能使用CSS执行此操作.

button {
  padding: 0.5rem 1rem;
  background-color: lightgray;
  border: 1px solid gray;
}

button:active {
  background-color: salmon;
  opacity: 0.5;
}

<button>Click Me!</button>

要在JS中解决这个问题,就像你正在做的那样,你需要解决一些问题.

正如评论中所提到的,有一种类型getElementsByClassName().我会使用querySelectorAll()而不是getElementsByClassName()因为它在如何选择元素方面更灵活.

classList是DOM元素的属性,不能单独使用.这样做element.classList.add( 'class' ),不是这个classList.add( 'class' ).

你的CSS选择器是不正确的,.button red opaque即将尝试选择一个元素,该.button元素包含具有元素<red>的元素<opaque>.

您的标记和选择器可能有问题,但我没有您的HTML进行验证.我为你的例子假设了你的标记.

var $btns = [].slice.call( document.querySelectorAll( '.button.red' ) );

$btns.map( function ( btn ) {

  btn.addEventListener( 'mousedown', function ( e ) {
    btn.classList.add( 'opaque' );
  } );

  btn.addEventListener( 'mouseup', function ( e ) {
    btn.classList.remove( 'opaque' );
  } );
  
} );

.button {
  padding: 0.5rem 1rem;
  background-color: lightgray;
  border: 1px solid gray;
}

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

.button.opaque {
  opacity: 0.5;
}

<button class="button red">Click Me!</button>