Question

我有一个wordBox用户将拖动触摸并拖动以选择单词。

我正在使用touchmove eventlistener来更改wordBox中单词的背景/颜色。但是touchmove只会改变文本的颜色/背景。

    var COLUMNS = 20;
    var ROWS = 12;
    var word = ['H', 'E', 'L', 'L', 'O'];

    var wordLength = word.length;

    

    var spans = document.getElementsByTagName("span");
    

    function select(evt) {
      var id = this.id;
      document.getElementById(this.id).style.background = "#ffffff";
      document.getElementById(this.id).style.color = "#0070C4";

      for (var i = 0; i < spans.length; i++) {
        mouseMove = spans[i].addEventListener("touchmove", function(sp) {

          document.getElementById(sp.toElement.id).style.background = "#ffffff";
          document.getElementById(sp.toElement.id).style.color = "#0070C4";

        });
      }
    }



    function start() {
      //GENERATE RANDOM WORDBOX
      for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
        spans[i].addEventListener("touchmove", select);
      }
    }

start();

html {
  background: #0070C4;
  color: #fff;
}
span {
  padding: 8px 6px;
}

<div id="wordBox">
  <div class="column1">
    <span id='r1'></span>
    <span id='r2'>></span>
    <span id='r3'>></span>
    <span id='r4'>></span>
    <span id='r5'>></span>
    <span id='r6'>></span>
    <span id='r7'>></span>
    <span id='r8'>></span>
    <span id='r9'>></span>
    <span id='r10'>></span>
    <span id='r11'>></span>
    <span id='r12'>></span>
    <span id='r13'>></span>
    <span id='r14'>></span>
    <span id='r15'>></span>
    <span id='r16'>></span>
    <span id='r17'>></span>
    <span id='r18'>></span>
    <span id='r19'>></span>
    <span id='r20'>></span>
  </div>
  <div class="column2">
    <span id='r21'>></span>
    <span id='r22'>></span>
    <span id='r23'>></span>
    <span id='r24'>></span>
    <span id='r25'>></span>
    <span id='r26'>></span>
    <span id='r27'>></span>
    <span id='r28'>></span>
    <span id='r29'>></span>
    <span id='r30'>></span>
    <span id='r31'>></span>
    <span id='r32'>></span>
    <span id='r33'>></span>
    <span id='r34'>></span>
    <span id='r35'>></span>
    <span id='r36'>></span>
    <span id='r37'>></span>
    <span id='r38'>></span>
    <span id='r39'>></span>
    <span id='r40'>></span>
  </div>
  <div class="column3">
    <span id='r41'>></span>
    <span id='r42'>></span>
    <span id='r43'>></span>
    <span id='r44'>></span>
    <span id='r45'>></span>
    <span id='r46'>></span>
    <span id='r47'>></span>
    <span id='r48'>></span>
    <span id='r49'>></span>
    <span id='r50'>></span>
    <span id='r51'>></span>
    <span id='r52'>></span>
    <span id='r53'>></span>
    <span id='r54'>></span>
    <span id='r55'>></span>
    <span id='r56'>></span>
    <span id='r57'>></span>
    <span id='r58'>></span>
    <span id='r59'>></span>
    <span id='r60'>></span>
  </div>
  <div class="column4">
    <span id='r61'>></span>
    <span id='r62'>></span>
    <span id='r63'>></span>
    <span id='r64'>></span>
    <span id='r65'>></span>
    <span id='r66'>></span>
    <span id='r67'>></span>
    <span id='r68'>></span>
    <span id='r69'>></span>
    <span id='r70'>></span>
    <span id='r71'>></span>
    <span id='r72'>></span>
    <span id='r73'>></span>
    <span id='r74'>></span>
    <span id='r75'>></span>
    <span id='r76'>></span>
    <span id='r77'>></span>
    <span id='r78'>></span>
    <span id='r79'>></span>
    <span id='r80'>></span>
  </div>
  <div class="column5">
    <span id='r81'>></span>
    <span id='r82'>></span>
    <span id='r83'></span>
    <span id='r84'>></span>
    <span id='r85'>></span>
    <span id='r86'>></span>
    <span id='r87'>></span>
    <span id='r88'>></span>
    <span id='r89'>></span>
    <span id='r90'>></span>
    <span id='r91'>></span>
    <span id='r92'>></span>
    <span id='r93'>></span>
    <span id='r94'>></span>
    <span id='r95'>></span>
    <span id='r96'>></span>
    <span id='r97'>></span>
    <span id='r98'>></span>
    <span id='r99'>></span>
    <span id='r100'>></span>
  </div>
  <div class="column6">
    <span id='r101'>></span>
    <span id='r102'>></span>
    <span id='r103'>></span>
    <span id='r104'>></span>
    <span id='r105'>></span>
    <span id='r106'>></span>
    <span id='r107'>></span>
    <span id='r108'>></span>
    <span id='r109'>></span>
    <span id='r110'>></span>
    <span id='r111'>></span>
    <span id='r112'>></span>
    <span id='r113'>></span>
    <span id='r114'>></span>
    <span id='r115'>></span>
    <span id='r116'>></span>
    <span id='r117'>></span>
    <span id='r118'>></span>
    <span id='r119'>></span>
    <span id='r200'>></span>
  </div>
  <div class="column7">
    <span id='r201'>></span>
    <span id='r202'>></span>
    <span id='r203'>></span>
    <span id='r204'>></span>
    <span id='r205'>></span>
    <span id='r206'>></span>
    <span id='r207'>></span>
    <span id='r208'>></span>
    <span id='r209'>></span>
    <span id='r210'>></span>
    <span id='r211'>></span>
    <span id='r212'>></span>
    <span id='r213'>></span>
    <span id='r214'>></span>
    <span id='r215'>></span>
    <span id='r216'>></span>
    <span id='r217'>></span>
    <span id='r218'>></span>
    <span id='r219'>></span>
    <span id='r220'>></span>
  </div>
  <div class="column8">
    <span id='r221'>></span>
    <span id='r222'>></span>
    <span id='r223'>></span>
    <span id='r224'>></span>
    <span id='r225'>></span>
    <span id='r226'>></span>
    <span id='r227'>></span>
    <span id='r228'>></span>
    <span id='r229'>></span>
    <span id='r230'>></span>
    <span id='r231'>></span>
    <span id='r232'>></span>
    <span id='r233'>></span>
    <span id='r234'>></span>
    <span id='r235'>></span>
    <span id='r236'>></span>
    <span id='r237'>></span>
    <span id='r238'>></span>
    <span id='r239'>></span>
    <span id='r240'>></span>
  </div>
  <div class="column9">
    <span id='r241'>></span>
    <span id='r242'>></span>
    <span id='r243'>></span>
    <span id='r244'>></span>
    <span id='r245'>></span>
    <span id='r246'>></span>
    <span id='r247'>></span>
    <span id='r248'>></span>
    <span id='r249'>></span>
    <span id='r250'>></span>
    <span id='r251'>></span>
    <span id='r252'>></span>
    <span id='r253'>></span>
    <span id='r254'>></span>
    <span id='r255'>></span>
    <span id='r256'>></span>
    <span id='r257'>></span>
    <span id='r258'>></span>
    <span id='r259'>></span>
    <span id='r260'>></span>
  </div>
  <div class="column10">
    <span id='r261'>></span>
    <span id='r262'>></span>
    <span id='r263'>></span>
    <span id='r264'>></span>
    <span id='r265'>></span>
    <span id='r266'>></span>
    <span id='r267'>></span>
    <span id='r268'>></span>
    <span id='r269'>></span>
    <span id='r270'>></span>
    <span id='r271'>></span>
    <span id='r272'>></span>
    <span id='r273'>></span>
    <span id='r274'>></span>
    <span id='r275'>></span>
    <span id='r276'>></span>
    <span id='r277'>></span>
    <span id='r278'>></span>
    <span id='r279'>></span>
    <span id='r300'>></span>
  </div>
  <div class="column11">
    <span id='r301'>></span>
    <span id='r302'>></span>
    <span id='r303'>></span>
    <span id='r304'>></span>
    <span id='r305'>></span>
    <span id='r306'>></span>
    <span id='r307'>></span>
    <span id='r308'>></span>
    <span id='r309'>></span>
    <span id='r310'>></span>
    <span id='r311'>></span>
    <span id='r312'>></span>
    <span id='r313'>></span>
    <span id='r314'>></span>
    <span id='r315'>></span>
    <span id='r316'>></span>
    <span id='r317'>></span>
    <span id='r318'>></span>
    <span id='r319'>></span>
    <span id='r320'>></span>
  </div>
  <div class="column12">
    <span id='r321'>></span>
    <span id='r322'>></span>
    <span id='r323'>></span>
    <span id='r324'>></span>
    <span id='r325'>></span>
    <span id='r326'>></span>
    <span id='r327'>></span>
    <span id='r328'>></span>
    <span id='r329'>></span>
    <span id='r330'>></span>
    <span id='r331'>></span>
    <span id='r332'>></span>
    <span id='r333'>></span>
    <span id='r334'>></span>
    <span id='r335'>></span>
    <span id='r336'>></span>
    <span id='r337'>></span>
    <span id='r338'>></span>
    <span id='r339'>></span>
    <span id='r340'>></span>
  </div>
</div>

JSFIDDLE

我也尝试了鼠标事件，但获得了理想的结果。我怎样才能做到这一点？

Answer 1

使用Document.elementFromPoint()与clientX和clientY选择当前element

Document接口的elementFromPoint()方法返回指定坐标处的最顶层元素。

var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
var started = false;

function clearAll() {
  started = true;
  for (var i = 0; i < spans.length; i++) {
    spans[i].style.background = "";
    spans[i].style.color = "";
  }
}

function select(e) {
  e.preventDefault();
  if (started) {
    var changedTouch = e.changedTouches[0];
    var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
    if (elem.tagName === 'SPAN') { //this condition could also be more accurate based on your specificity of the element
      elem.style.background = "#ffffff";
      elem.style.color = "#0070C4";
    }
  }
}

function mouseMoveHandler(e) {
  e.preventDefault();
  if (started) {
    this.style.background = "#ffffff";
    this.style.color = "#0070C4";
  }
}

function reset() {
  started = false;
}

function start() {
  for (var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
    spans[i].addEventListener("touchstart", clearAll);
    spans[i].addEventListener("mousedown", clearAll);
    spans[i].addEventListener("touchmove", select);
    spans[i].addEventListener("mousemove", mouseMoveHandler);
    spans[i].addEventListener("touchend", reset);
    spans[i].addEventListener("mouseup", reset);
  }
}
start();

html {
  background: #0070C4;
  color: #fff;
}
span {
  padding: 8px 6px;
}

<div id="wordBox">
  <div class="column1">
    <span id='r1'>></span>
    <span id='r2'>></span>
    <span id='r3'>></span>
    <span id='r4'>></span>
    <span id='r5'>></span>
    <span id='r6'>></span>
    <span id='r7'>></span>
    <span id='r8'>></span>
    <span id='r9'>></span>
    <span id='r10'>></span>
    <span id='r11'>></span>
    <span id='r12'>></span>
    <span id='r13'>></span>
    <span id='r14'>></span>
    <span id='r15'>></span>
    <span id='r16'>></span>
    <span id='r17'>></span>
    <span id='r18'>></span>
    <span id='r19'>></span>
    <span id='r20'>></span>
  </div>
  <div class="column2">
    <span id='r21'>></span>
    <span id='r22'>></span>
    <span id='r23'>></span>
    <span id='r24'>></span>
    <span id='r25'>></span>
    <span id='r26'>></span>
    <span id='r27'>></span>
    <span id='r28'>></span>
    <span id='r29'>></span>
    <span id='r30'>></span>
    <span id='r31'>></span>
    <span id='r32'>></span>
    <span id='r33'>></span>
    <span id='r34'>></span>
    <span id='r35'>></span>
    <span id='r36'>></span>
    <span id='r37'>></span>
    <span id='r38'>></span>
    <span id='r39'>></span>
    <span id='r40'>></span>
  </div>
  <div class="column3">
    <span id='r41'>></span>
    <span id='r42'>></span>
    <span id='r43'>></span>
    <span id='r44'>></span>
    <span id='r45'>></span>
    <span id='r46'>></span>
    <span id='r47'>></span>
    <span id='r48'>></span>
    <span id='r49'>></span>
    <span id='r50'>></span>
    <span id='r51'>></span>
    <span id='r52'>></span>
    <span id='r53'>></span>
    <span id='r54'>></span>
    <span id='r55'>></span>
    <span id='r56'>></span>
    <span id='r57'>></span>
    <span id='r58'>></span>
    <span id='r59'>></span>
    <span id='r60'>></span>
  </div>
  <div class="column4">
    <span id='r61'>></span>
    <span id='r62'>></span>
    <span id='r63'>></span>
    <span id='r64'>></span>
    <span id='r65'>></span>
    <span id='r66'>></span>
    <span id='r67'>></span>
    <span id='r68'>></span>
    <span id='r69'>></span>
    <span id='r70'>></span>
    <span id='r71'>></span>
    <span id='r72'>></span>
    <span id='r73'>></span>
    <span id='r74'>></span>
    <span id='r75'>></span>
    <span id='r76'>></span>
    <span id='r77'>></span>
    <span id='r78'>></span>
    <span id='r79'>></span>
    <span id='r80'>></span>
  </div>
  <div class="column5">
    <span id='r81'>></span>
    <span id='r82'>></span>
    <span id='r83'></span>
    <span id='r84'>></span>
    <span id='r85'>></span>
    <span id='r86'>></span>
    <span id='r87'>></span>
    <span id='r88'>></span>
    <span id='r89'>></span>
    <span id='r90'>></span>
    <span id='r91'>></span>
    <span id='r92'>></span>
    <span id='r93'>></span>
    <span id='r94'>></span>
    <span id='r95'>></span>
    <span id='r96'>></span>
    <span id='r97'>></span>
    <span id='r98'>></span>
    <span id='r99'>></span>
    <span id='r100'>></span>
  </div>
  <div class="column6">
    <span id='r101'>></span>
    <span id='r102'>></span>
    <span id='r103'>></span>
    <span id='r104'>></span>
    <span id='r105'>></span>
    <span id='r106'>></span>
    <span id='r107'>></span>
    <span id='r108'>></span>
    <span id='r109'>></span>
    <span id='r110'>></span>
    <span id='r111'>></span>
    <span id='r112'>></span>
    <span id='r113'>></span>
    <span id='r114'>></span>
    <span id='r115'>></span>
    <span id='r116'>></span>
    <span id='r117'>></span>
    <span id='r118'>></span>
    <span id='r119'>></span>
    <span id='r200'>></span>
  </div>
  <div class="column7">
    <span id='r201'>></span>
    <span id='r202'>></span>
    <span id='r203'>></span>
    <span id='r204'>></span>
    <span id='r205'>></span>
    <span id='r206'>></span>
    <span id='r207'>></span>
    <span id='r208'>></span>
    <span id='r209'>></span>
    <span id='r210'>></span>
    <span id='r211'>></span>
    <span id='r212'>></span>
    <span id='r213'>></span>
    <span id='r214'>></span>
    <span id='r215'>></span>
    <span id='r216'>></span>
    <span id='r217'>></span>
    <span id='r218'>></span>
    <span id='r219'>></span>
    <span id='r220'>></span>
  </div>
  <div class="column8">
    <span id='r221'>></span>
    <span id='r222'>></span>
    <span id='r223'>></span>
    <span id='r224'>></span>
    <span id='r225'>></span>
    <span id='r226'>></span>
    <span id='r227'>></span>
    <span id='r228'>></span>
    <span id='r229'>></span>
    <span id='r230'>></span>
    <span id='r231'>></span>
    <span id='r232'>></span>
    <span id='r233'>></span>
    <span id='r234'>></span>
    <span id='r235'>></span>
    <span id='r236'>></span>
    <span id='r237'>></span>
    <span id='r238'>></span>
    <span id='r239'>></span>
    <span id='r240'>></span>
  </div>
  <div class="column9">
    <span id='r241'>></span>
    <span id='r242'>></span>
    <span id='r243'>></span>
    <span id='r244'>></span>
    <span id='r245'>></span>
    <span id='r246'>></span>
    <span id='r247'>></span>
    <span id='r248'>></span>
    <span id='r249'>></span>
    <span id='r250'>></span>
    <span id='r251'>></span>
    <span id='r252'>></span>
    <span id='r253'>></span>
    <span id='r254'>></span>
    <span id='r255'>></span>
    <span id='r256'>></span>
    <span id='r257'>></span>
    <span id='r258'>></span>
    <span id='r259'>></span>
    <span id='r260'>></span>
  </div>
  <div class="column10">
    <span id='r261'>></span>
    <span id='r262'>></span>
    <span id='r263'>></span>
    <span id='r264'>></span>
    <span id='r265'>></span>
    <span id='r266'>></span>
    <span id='r267'>></span>
    <span id='r268'>></span>
    <span id='r269'>></span>
    <span id='r270'>></span>
    <span id='r271'>></span>
    <span id='r272'>></span>
    <span id='r273'>></span>
    <span id='r274'>></span>
    <span id='r275'>></span>
    <span id='r276'>></span>
    <span id='r277'>></span>
    <span id='r278'>></span>
    <span id='r279'>></span>
    <span id='r300'>></span>
  </div>
  <div class="column11">
    <span id='r301'>></span>
    <span id='r302'>></span>
    <span id='r303'>></span>
    <span id='r304'>></span>
    <span id='r305'>></span>
    <span id='r306'>></span>
    <span id='r307'>></span>
    <span id='r308'>></span>
    <span id='r309'>></span>
    <span id='r310'>></span>
    <span id='r311'>></span>
    <span id='r312'>></span>
    <span id='r313'>></span>
    <span id='r314'>></span>
    <span id='r315'>></span>
    <span id='r316'>></span>
    <span id='r317'>></span>
    <span id='r318'>></span>
    <span id='r319'>></span>
    <span id='r320'>></span>
  </div>
  <div class="column12">
    <span id='r321'>></span>
    <span id='r322'>></span>
    <span id='r323'>></span>
    <span id='r324'>></span>
    <span id='r325'>></span>
    <span id='r326'>></span>
    <span id='r327'>></span>
    <span id='r328'>></span>
    <span id='r329'>></span>
    <span id='r330'>></span>
    <span id='r331'>></span>
    <span id='r332'>></span>
    <span id='r333'>></span>
    <span id='r334'>></span>
    <span id='r335'>></span>
    <span id='r336'>></span>
    <span id='r337'>></span>
    <span id='r338'>></span>
    <span id='r339'>></span>
    <span id='r340'>></span>
  </div>
</div>

Fiddle Demo

Answer 2

对于clientX / clientY和document.elementFromPoint的注意事项 - clientX通常是到视口的距离，不包括滚动偏移。 elementFromPoint使用相同的位置引用。 Android上的Chrome（版本50.0.2661.89）位置似乎包含滚动偏移。 Android上的Internet浏览器和iOS上的Safari似乎使用正确的参考点。桌面浏览器（Chrome，Firefox，IE9＆amp; up，Edge和Safari）似乎也使用正确的参考点。

如果您只是使用clientX和elementFromPoint，则应该没有任何问题，因为正在使用相同的参考点。当我添加偏移量来定位一个新元素时，我遇到了麻烦。它工作正常，直到我在Android手机上缩放显示器并向左移动显示器。我的新元素已在大多数浏览器上正确定位，但在Android上的Chrome上无法正确定位。

改变背景＆amp;颜色ontouchmove

2 个答案:

Fiddle Demo