Microsoft Surface: How do I allow JavaScript touch/drag events to work without being intercepted by the browser?

心已入冬 提交于 2019-11-27 18:45:18

问题


I have a Google Maps map on my web site, but when using it with a Microsoft Surface tablet, the "pan" gesture is intercepted by the browser -- it tries to go to the next browser window. How do I allow the pan (drag event) to be ignored by the browser so the map behaves normally? Going to maps.google.com, the map is perfectly dragable, so there must be a workaround that Google employs.


回答1:


According to MS's guide on "Pointer and gesture events" (here: http://msdn.microsoft.com/en-us/library/ie/hh673557%28v=vs.85%29.aspx#Panning_and_zooming) you need to add a CSS class to the element you want to disable panning on with the "-ms-touch-action" rule set to "none" like this:

.disablePanZoom 
{
    -ms-touch-action: none; /* Shunt all pointer events to JavaScript code. */
}

--EDIT--

There is now a non-prefixed touch-action property, proposed in the W3C Pointer Events Candidate recomendation.

From the MSDN documentation:

As of Internet Explorer 11, the Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.



来源:https://stackoverflow.com/questions/13130004/microsoft-surface-how-do-i-allow-javascript-touch-drag-events-to-work-without-b

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!