すると、ユーザーがタッチとknockout.js

Question

私はノックアウトを使用していると私が達成しようとしていると感動された要素（VMS）を取得する方法を、指を動かし、このです：私は、ユーザーが選択したい

いくつかのブロック：

2. の周りにマウスを移動し、マウスボタンを離すことなく、第1のブロック（それが選択されている）
3. をクリックして、あなたが通過する全てのブロックが
4. を選択するには、秒を停止するためにボタンを離します選挙。

マウスイベントを使用するのは非常に簡単ですが、タッチデバイスもターゲットにする必要があります（Android、iPhone、タッチノート）。

ノックアウトでタッチイベントを使用して同じ動作をするにはどうすればいいですか？

1. タッチ指を離すことなく、最初のブロック
2. 、動き回る
3. はすべてのブロックに

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を使用することができますが、私はそれが最善の/唯一の方法だと想像することはできません。 ..

それは最初の要素を特定するためにtouchのxとyを使用し、次にblockのviewmodelを取得するko.dataForを使用しています...それはしかし作業を行う...

暫定的な解決策は、ブロックを格納することができ要素の属性にidプロパティを設定し、Mapをvmのblockのビューモデルにリンクするidの小道具を維持します。ロジックの一部を高速化する可能性があります。

私は誰にも要素にそれらの奇妙なタッチイベントをリンクするより論理的な方法を思い付くかどうかを確認するために興味があります:)

このスニペットをテストするには、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>