將eventListener添加到按鈕以更改類的onmouseup / down

Question

我有幾個紅色和黑色按鈕，我想將“ onmousedown”和“ onmouseup”事件添加到共享同一類的紅色按鈕組中（“紅色按鈕”）。

我想更改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> 

Answer 2

可以使用CSS進行操作，但這是在鼠標向上和鼠標向下添加jquery偵聽器的解決方案。

 $('.button' + '.red').each(function() { $(this).mousedown(function() { $(this).toggleClass('opaque'); }); $(this).mouseup(function() { $(this).toggleClass('opaque'); }); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button red">Button</button> <button class="button black">Button</button> 

Answer 3

• 無需迭代（循環）
• <form>標記中包裝的按鈕
• 使用HTMLFormControlsCollection API訪問按鈕
• 通過使用事件委托， 僅將2個事件偵聽器用於20個紅色按鈕與20個黑色按鈕的混合
• 通過transition屬性的CSS動畫

演示版

 var form = document.forms.main; form.addEventListener('mousedown', fade, false); form.addEventListener('mouseup', fade, false); function fade(e) { if (e.target !== e.currentTarget) { e.target.classList.toggle('opq'); } } 

 .btn { background-color: black; color: white; height: 30px; width: 50px; text-align: center; opacity: 1; cursor: pointer; border-radius: 10px; transition: all .5s ease; } .red { background-color: red; transition: all .5s ease } .btn.red.opq { opacity: 0.7; transition: all .5s ease } 

 <form id='main'> <button class='red btn' type='button'>RED</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='red btn' type='button'>RED</button> <button class='btn' type='button'>BLK</button> <button class='btn' type='button'>BLK</button> </form> 

Answer 4

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);
}

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;
}

1. getElementByClassName應該是getElementsByClassName
2. 您需要傳遞一個函數作為事件偵聽器的第二個參數
3. 您需要為classList屬性提供上下文
4. 事件的正確名稱是mousedown和mouseup
5. CSS屬性需要以分號結尾
6. CSS選擇器不正確