javascript - Dynamically disabling touch-action (overscroll) for SVG elements -


i'm having problems touch screen overscrolling on chrome.

i have document svg element in it, contains shape, rectangle:

enter image description here

now, want make rectangle draggable, means want disable kinds of touch actions on respective <rect> element, setting it's style property touch-action: none.

this works fine on desktop browsers, except chrome. on chrome, when touch , move on rectangle, browser's overscroll feature kicks in. causes browser window awkwardly move, pointer events have set on rectangle cancelled.

i.e. pointermove registered fraction of second, stops when overscroll kicks in. pointerup never called when touch released.

enter image description here

now, if had html element instead of svg element, setting touch-action: none job. same thing on svg element fails.

technically, solved either setting touch-action: none on document.body or wrapping whole svg <div> element touch-action: none set.

unfortunately, not option me since need document (and rest of rectangle-surrounding svg) retain of original touch gestures, except when directly on rectangle.

as solution, did try dynamically set touch-action: none on document: body when pointerdown event occurs on rectangle.

// element var o = document.getelementbyid( "test" );  // disable touch action on press of 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"; } );

unfortunately, not help. style on body gets set , next time try dragging rectangle works expected (because pointerup event never gets executed), not time.

adding preventdefault() event handlers has no effect.

i appreciate if have had similar experience share solution.

here's live example of above.

// element  var o = document.getelementbyid( "test" );    // disable touch action on press of 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>

update: looks using preventdefault() on touchstart event trick.

however, seems wrong use both modern pointerdown , legacy touchstart @ same time. seems bug in chrome 60. if confirm it, great.

i think enough preventing touchstart:

window.addeventlistener( "touchstart", function(e) {   // determine wether or not panning rectangle:   if (e.target ....)       e.preventdefault(); } );

Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more