Question

我发现touchstart在使用iPad时比点击事件效果更好，所以我想使用touchstart而不是点击＆＃39;。

问：如何重构以下JavaScript部分？我曾经只有一个$(document).on('click','.number',pgm.number)

＆＃13;

pgm = {}
pgm.number = function() {
  console.log(this) // etc
}
btn1.addEventListener('touchstart', pgm.number, false)
btn2.addEventListener('touchstart', pgm.number, false)
btn3.addEventListener('touchstart', pgm.number, false)
btn4.addEventListener('touchstart', pgm.number, false)
btn5.addEventListener('touchstart', pgm.number, false)
btn6.addEventListener('touchstart', pgm.number, false)
btn7.addEventListener('touchstart', pgm.number, false)
btn8.addEventListener('touchstart', pgm.number, false)
btn9.addEventListener('touchstart', pgm.number, false)
btn0.addEventListener('touchstart', pgm.number, false)

＆＃13;

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>

＆＃13;

Answer 1

您可以按类number获取按钮，并使用Array#forEach函数迭代它们，并为每个项添加事件处理程序。

document.querySelectorAll('.number')
        .forEach(btn => btn .addEventListener('touchstart', pgm.number, false))

查看示例

＆＃13;

function showId() {
   console.log(this.id) ;
}

document.querySelectorAll('.number')
            .forEach(btn => btn.addEventListener('click', showId, false))

＆＃13;

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>

＆＃13;

Answer 2

将touchstart添加到文档中，并使用事件目标检查该元素是否包含className ".number"。这是最接近jQuery的事件委托：

pgm.number = function(e) {
    var t = e.target;                               // get the taget of the event (the element that got touchstarted)
    if(t.classList.contains("number")) {            // if it has a class of .number
        console.log(t);                             // log it (use it)
    }
}

document.addEventListener("touchstart", pgm.number, false);

使用点击的示例：

＆＃13;

var pgm = {};
pgm.number = function(e) {
  var t = e.target;
  if (t.classList.contains("number")) {
    console.log(t);
  }
}

document.addEventListener("click", pgm.number, false);

＆＃13;

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>

＆＃13;

Answer 3

＆＃13;

var buttons = document.querySelectorAll('.number');

buttons.forEach((button)=>{
  button.addEventListener('click',(e)=>{console.log(e.target)},false);
});

＆＃13;

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>

＆＃13;

它的示例代码。

我希望它可以帮到你。

将相同的事件侦听器分配给多个按钮

3 个答案: