Question

在HTML页面中，我有7个按钮，带有以下ID：＃I，＃II，＃III，＃IV，＃V，＃VI，＃VII strong> rContainer div。我想设置与触摸按钮相关的 iActiveButton 变量。我的代码似乎可以正常工作，但我认为可以对其进行增强和缩短。有想法吗？

var iActiveButton;

function touchHandler(){
  console.log(iActiveButton);
}

rContainer.addEventListener("touchstart", function(){

  I.addEventListener("touchstart", function(){iActiveButton = 1;}, false);
  II.addEventListener("touchstart", function(){iActiveButton = 2;}, false);
  III.addEventListener("touchstart", function(){iActiveButton = 3;}, false);
  IV.addEventListener("touchstart", function(){iActiveButton = 4;}, false);
  V.addEventListener("touchstart", function(){iActiveButton = 5;}, false);
  VI.addEventListener("touchstart", function(){iActiveButton = 6;}, false);
  VII.addEventListener("touchstart", function(){iActiveButton = 7;}, false);

  touchHandler();

}, false);

Answer 1

一种解决方法是查看外部事件侦听器的事件目标。

rContainer.addEventListener("touchstart", function(event){
  const targetId = event.target.getAttribute('id');

  // don't set iActiveButton if you clicked empty space inside `rContainer`
  if (targetId) {
    // romanNumeralMap looks like { 'I': 1, 'II': 2, etc... }
    iActiveButton = romanNumeralMap[targetId];
  }

  touchHandler();
}, false);

尽管这确实需要从罗马数字到常规数字的映射，但是这种方式仅添加一个事件侦听器！

Answer 2

如果您真的想保持代码逻辑不变，而只想重构，那么我可以这样做：

const buttonArray = [I, II, III, IV, V, VI, VII];
rContainer.addEventListener("touchstart", function(){
  buttonArray.forEach((button, index) => {
    button.addEventListener("touchstart", function(){iActiveButton = index;}, false);
  }

  touchHandler();
}, false);

但是我完全同意这些评论，在每个事件上添加新的EventListeners似乎很奇怪。

有没有一种方法可以优化“ addEventListener”代码块？

2 个答案: