当用户触摸并移动手指时，如何获取使用敲出.js触摸了哪些元素（虚拟机）

Question

I'm using knockout and I'm trying to achieve is this:

I want the user to select some blocks:

1. click the first block (it is selected)
2. without releasing the mouse button, move the mouse around
3. every block you pass through is selected
4. release the button to stop selecting.

It's very easy to do it using mouse events, but I need to target touch devices too (android, iphone, touch notebooks).

How to have the same behavior using touch events with knockout?

1. touch the first block
2. without releasing the finger, move around
3. select all touched blocks
4. release the finger

ps: I got stuck because when using touch events, the event source is locked to the first touched element (oh god, why???) and I can't figure out which others blocks the user touches.

Here is a jsfiddle with my code:

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

You could use document.elementFromPoint , but I can't imagine it's the best/only way...

Feels hacky and slow, since it first uses the x and y of a touch to pinpoint an element, and then uses ko.dataFor to get to the block viewmodel... It does work though...

An interim solution could be to store a block id property in an attribute on the element, and keep a Map linking id props to block viewmodels in your $parent vm. Might speed up some parts of the logic.

I'm curious to see if anyone else comes up with a more logical way of linking those weird touch events to an element :)

To test this snippet, set your developer tools to emulate touches

 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.select = function(block) { block.color("red"); }; self.startTouch = function(data, event) { self.isSelecting = true; }; self.endTouch = function(data, event) { self.isSelecting = false; }; self.touch = function(data, event) { if (!self.isSelecting) return; var x = event.touches[0].clientX; var y = event.touches[0].clientY; var target = document.elementFromPoint(x, y); var vm = ko.dataFor(target); if (vm && vm.color) self.select(vm); } }; ko.applyBindings(new vm()); 

 .block { display: inline-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, event: { touchstart: startTouch, touchend: endTouch, touchmove: touch }"> <div class="block" onselectstart="return false" data-bind="text: text, style:{ 'background-color' : color }"> </div> </div>