SVG öğeleri için dokunma hareketini (overscroll) dinamik olarak devre dışı bırakma

Question

Chrome'da dokunmatik ekran aşırı hızıyla ilgili sorun yaşıyorum. Şimdi

, ben devre dışı bırakmak istediğiniz anlamına gelir sürüklenebilir dikdörtgen yapmak istiyorum:

Ben bir dikdörtgen demek, bazı şekil içeren İçinde am SVG elemanı bulunan bir belgeye sahip touch-action: none stil özelliğini ayarlayarak, ilgili <rect> öğesinde her türlü dokunma eylemi.

Bu, Chrome dışındaki tüm masaüstü tarayıcılarında sorunsuz çalışır. Chrome'da, bir dikdörtgene dokunduğumda ve hareket ettiğimde, tarayıcının aşırı gezinme özelliği devreye giriyor. Bu, tarayıcı penceresinin tuhaf şekilde hareket etmesine ve ayrıca dikdörtgenin üzerinde bıraktığım tüm İşaretçi olaylarının gerçekleşmesine neden oluyor.

I.I.I.e. pointermove saniyenin bir kesimi için kaydedilir, daha sonra sadece overcroll in başladığı zaman durur. pointerup dokunmatik bırakıldığında bile asla çağrılmaz.

Şimdi, iş yapacağını touch-action: none ayar bir HTML öğesi yerine SVG öğesini olsaydı. Bir SVG öğesinde aynı şey başarısız olur.

Teknik olarak, bu iki document.body üzerinde touch-action: none ayarlama veya touch-action: none set ile <div> elemanı içine bütün SVG'yi sararak çözülebilir.

Ne yazık ki, doğrudan dikdörtgenin dışındaki tüm orijinal dokunma hareketlerini korumak için belgeye (ve dikdörtgen-çevreleyen SVG'nin geri kalanına) ihtiyacım olduğundan bu benim için bir seçenek değil.

Bir çözüm olarak, pointerdown olayının bir dikdörtgende gerçekleşmesi durumunda document: body için dinamik olarak ayarlamayı denedim.

// Get element 
var o = document.getElementById("test"); 

// disable touch action on press of the SVG element 
o.addEventListener("pointerdown", function(e) { 
    document.body.style.touchAction = "none"; 
}); 

// re-enable touch action when released 
o.addEventListener("pointerup", function(e) { 
    document.body.style.touchAction = "auto"; 
}); 

Ne yazık ki, bu yardımcı olmuyor. Vücuttaki stil ayarlanır ve bir dahaki sefere dikdörtgeni sürüklemeyi denerim beklendiği gibi çalışır (çünkü pointerup olayı asla gerçekleşmez), sadece bu sefer değil. Olay işleyicilerine de preventDefault() eklenmesi de etkisiz.

Benzer bir deneyime sahip biri bir çözümü paylaşabilseydi memnun olurum.

Yukarıdakilerin canlı bir örneğidir.

---

GÜNCELLEME

// Get element 
 
var o = document.getElementById("test"); 
 

 
// disable touch action on press of the SVG element 
 
o.addEventListener("pointerdown", function(e) { 
 
    document.body.style.touchAction = "none"; 
 
}); 
 

 
// re-enable touch action when released 
 
o.addEventListener("pointerup", function(e) { 
 
    document.body.style.touchAction = "auto"; 
 
});

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 300px; height: 300px; border: 1px solid #eee;"> 
 
    <g transform="translate(50,50)"> 
 
    <rect fill="#00fff0" width="200" height="200" style="touch-action: none;"></rect> 
 
    </g> 
 
</svg>

: Bir touchstart olaya hile preventDefault() Kullandığınız benziyor.

Ancak, aynı anda hem Modern pointerdown ve eski touchstart kullanmanın yanlış gibi görünüyor. Bu, Chrome 60'da bir hata gibi görünüyor.Eğer herkes bunu teyit edebilirse, bu harika olurdu.

Answer 1

Ben touchstart önleyerek yeterli olacağını düşünüyorum:

window.addEventListener("touchstart", function(e) { 
    // Determine wether or not you are panning from rectangle: 
    if (e.target ....) 
     e.preventDefault(); 
});