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

Question

我有几个红色和黑色按钮，我想将“onmousedown”和“onmouseup”事件添加到共享同一类(“button red”)的一组红色按钮。

我想更改 onmousedown 添加类“opaque”，然后 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("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>