Question

我正在使用淘汰赛，而我正在努力实现这一目标：

我希望用户选择一些块：

点击第一个区块（已选中）
不释放鼠标按钮，移动鼠标
您选择的每个街区都已选中
释放按钮以停止选择。

使用鼠标事件很容易做到，但我也需要定位触控设备（android，iphone，触控笔记本）。

如何使用带淘汰赛的触摸事件获得相同的行为？

触摸第一个块
不放开手指，四处移动
选择所有触摸的块
释放手指

ps：我被卡住了，因为当使用触摸事件时，事件源被锁定到第一个被触摸的元素（哦，上帝，为什么???），我无法弄清楚哪些其他人阻止用户触摸。

这是我的代码的jsfiddle：

https://jsfiddle.net/m38tfpq4/2/

var vmBlock = function(label) {
  var self = this;
  self.text = label;
  self.color = ko.observable('grey');
}

var vm = function() {
  var self = this;
  self.isSelecting = false;
  self.blocks = [new vmBlock('a'), new vmBlock('b'), new vmBlock('c')];
  self.selectStart = function(block) {
    console.log('start');
    self.isSelecting = true;
    self.select(block);
  }
  self.selectEnd = function(block) {
    console.log('end');
    self.isSelecting = false;
  }
  self.select = function(block) {
    console.log('select: ' + self.isSelecting);
    if (!self.isSelecting) {
      return;
    }
    block.color('red');
  };
};

ko.applyBindings(new vm());

.block {
  width: 100px;
  height: 100px;
  margin: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="container" data-bind="foreach: blocks">
  <div class="block" onselectstart="return false" data-bind="text: text, style:{ 'background-color' : color }, event: { mousedown: $parent.selectStart, mouseover: $parent.select, mouseup: $parent.selectEnd }">
  </div>
</div>

Answer 1

你可以使用document.elementFromPoint，但我无法想象它是最好/唯一的方式......

感觉hacky和慢，因为它首先使用x的{{1}}和y来查明元素，然后使用touch来到{{ 1}} viewmodel ...它工作但是......

临时解决方案可以是在元素的属性中存储块ko.dataFor属性，并将block个id道具链接到Map个视图模型中{ {1}} vm。可能会加速逻辑的某些部分。

我很想知道是否有其他人想出一种更合乎逻辑的方式将这些奇怪的触摸事件与元素联系起来：）

要测试此代码段，请将开发人员工具设置为emulate touches

id

block

$parent

当用户触摸并移动他的手指时，如何通过knockout.js触及哪些元素（vms）

1 个答案: