Question

我一直在尝试使用我在Stack Overflow上找到的事件监听器的技术。

我自己的问题是我试图检索一些元素的元素id（通过测试id名称检索）并将任何样式/更改隔离到那些元素（有多个元素可能会发生事件他们）。

因为我不知道哪些元素可能会发生事件，所以我发现最大的问题是收集并传递我想要传递给侦听器的元素的id。我相信我已经找到了一种方法来克服使用数组和if else语句。然后我发现了一个新问题...

我使用这个例子将问题缩小到选择A或B.选择A需要修改具有样式的元素，而选择B不需要。在这个例子中，我已经能够收集一个id并将它传递给监听功能但是由于某种原因，尽管事件看似成功地传递给了监听功能，但是监听器中的匿名函数没有触发来修改选择A.我正在寻求帮助以找出原因。如果我明确硬编码一个id给听众，程序就可以了！

任何人都可以提供的任何帮助都会非常棒，非常感谢。

＆＃13;

function listen(elem, evnt, func) {
  if (elem.addEventListener) { //W3C DOMS.
    elem.addEventListener(evnt, func, false);
  } else if (elem.attachEvent) { //IE DOM 7
    var r = elem.attachEvent("on" + evnt, func);
    return r;
  }
}

function attachListeners() {

  var selectors = document.querySelectorAll("div");

  for (var i = 0; i < selectors.length; i++) {
    selectors[i].addEventListener("focus", function(event) {
      var id_of_clicked_element = event.target.id
    });

    // var id_of_clicked_element = document.activeElement.id;
    if (id_of_clicked_element = 'touch_me') {
      var touch_div = id_of_clicked_element;
    } else if (id_of_clicked_element = 'What_about_me') {
      touch_div = id_of_clicked_element;
    }
  }


  //var touch_div = document.getElementById('touch_me');
  //  If you uncomment the line above and comment out the bit   
  //   above the program works


  listen(touch_div, 'touchmove', function(event) {
    touch_div.innerHTML = "Being Touched" + event.targetTouches.length;
    touch_div.style.background = 'green';
  }, false);

  listen(touch_div, 'touchstart', function(event) {
    event.preventDefault();
    touch_div.innerHTML = "touchstart";
    touch_div.style.background = 'green';
  }, false);

  listen(touch_div, 'touchend', function(event) {
    touch_div.innerHTML = "Thanks";
    touch_div.style.background = '#CCFF66';
  }, false);

  listen(touch_div, 'click', function(event) {
    touch_div.innerHTML = "Hey - touch not Click!";
    touch_div.style.background = 'red';
  }, false);

  listen(touch_div, 'onmouseup', function(event) {
    touch_div.innerHTML = "Hey - that was a Click!";
    touch_div.style.background = '';
  }, false);
}

window.onload = attachListeners;

＆＃13;

<div id="touch_me"> Touch Me!</div>
<div id="What_about_me"> What About Me!</div>

＆＃13;

Answer 1

问题出在你的if语句中，你只是得到元素的ID而不是整个元素。你应该把它改成：

    if (id_of_clicked_element === 'touch_me') {
      var touch_div = document.getElementById(id_of_clicked_element);
    } else if (id_of_clicked_element === 'What_about_me') {
      touch_div = document.getElementById(id_of_clicked_element);
    }

事件处理程序上的匿名函数未激活样式

1 个答案: