如何使用 jQuery Mobile 仅支持触摸事件（无 UI 增强）？

How to use jQuery Mobile for its touch event support only (no UI enhancements)?

提问by Sylvain

I'm working on a web app that has its own look and feel. I want to use jQuery Mobile for the touch events support only.

我正在开发一个具有自己外观和感觉的网络应用程序。我只想将 jQuery Mobile 用于触摸事件支持。

When I link jquery.mobile.min.js (without linking the css), then the layout of my page is broken.

当我链接 jquery.mobile.min.js（不链接 css）时，我的页面布局被破坏了。

How can I configure (initialize) jQuery Mobile to only use touch events support? Would I bind the events in the jQuery document ready hook since I'd not have any JQM page related event?

如何配置（初始化）jQuery Mobile 以仅使用触摸事件支持？由于我没有任何与 JQM 页面相关的事件，我会在 jQuery 文档就绪挂钩中绑定事件吗？

Edit

编辑

See this example in jsfiddle: http://jsfiddle.net/redhotsly/JGgrw/. The html contains a <button>but jQuery Mobile created a <span>to its left. If you inspect the resulting markup (F12) you will see that jQuery Mobile also added a CSS class to my button.

在 jsfiddle 中查看此示例：http: //jsfiddle.net/redhotsly/JGgrw/。html 包含一个，<button>但 jQuery Mobile 在<span>其左侧创建了一个。如果您检查生成的标记 (F12)，您将看到 jQuery Mobile 还向我的按钮添加了一个 CSS 类。

Edit:

编辑：

I need a solution where I'll not have modify the JQM script. I need to use the official script off a CDN.

我需要一个无需修改 JQM 脚本的解决方案。我需要使用 CDN 的官方脚本。

采纳答案by Steve O

If you just want to bind to touch/gesture events I'd use jGestures instead:

如果您只想绑定到触摸/手势事件，我会改用 jGestures：

http://jgestures.codeplex.com/

http://jgestures.codeplex.com/

Nice little jquery plugin that I've used on projects before with a big range of events to bind to:

我以前在项目中使用过的漂亮的小 jquery 插件，其中包含要绑定到的大量事件：

Available events:

orientationchangeThe device is turned clockwise or counterclockwise. This event is triggered by the device and might use an internal gyroscope.

pinchIs triggered during a pinch gesture (two fingers moving away from or towards each other).

rotateIs triggered during a rotation gesture (two fingers rotating clockwise or counterclockwise).

swipemoveIs triggered during a swipe move gesture (finger(s) being moved around the device, e.g. dragging)

swipeoneIs triggered after a swipe move gesture with one touchpoint (one finger was moved around the device)

swipetwoIs triggered after a swipe move gesture with two touchpoints (two fingers were moved around the device)

swipethreeIs triggered after a swipe move gesture with three touchpoints (three fingers were moved around the device)

swipefourIs triggered after a swipe move gesture with four touchpoints (four fingers were moved around the device)

swipeupIs triggered after an strict upwards swipe move gesture

swiperightupIs triggered after a rightwards and upwards swipe move gesture

swiperightIs triggered after a strict rightwards swipe move gesture

swiperightdownIs triggered after a rig*htwards and downwards swipe move gesture

swipedownIs triggered after a strict downwards swipe move gesture

swipeleftdownIs triggered after a leftwards and downwards swipe move gesture

swipeleftIs triggered after a strict leftwards swipe move gesture

swipeleftupIs triggered after a leftwards and upwards swipe move gesture

taponeIs triggered after a single (one finger) tap gesture

taptwoIs triggered after a double (two finger) tap gesture

tapthreeIs triggered after a tripple (three finger) tap gesture

pinchopenIs triggered when a pinchopen gesture (two fingers moving away from each other) occured and the touchpoints (fingers) are removed the device.

pinchcloseIs triggered when a pinchclose gesture (two fingers moving towards each other) occured and the touchpoints (fingers) are removed the device.

rotatecwIs triggered when a clockwise rotation gesture (two fingers rotating clockwise) occured and the touchpoints (fingers) are removed the device.

rotateccwIs triggered when a counterclockwise rotation gesture (two fingers rotating counterclockwise) occured and the touchpoints (fingers) are removed the device.

可用事件：

orientationchange设备顺时针或逆时针转动。此事件由设备触发，可能使用内部陀螺仪。

捏合在捏合手势（两个手指彼此远离或靠近）期间触发。

旋转在旋转手势（两个手指顺时针或逆时针旋转）期间触发。

swipemove在滑动移动手势（手指在设备周围移动，例如拖动）期间触发

swipeone在一个触摸点的滑动移动手势后触发（一根手指在设备周围移动）

swipetwo在具有两个接触点的滑动移动手势后触发（两根手指在设备周围移动）

swipethree在三个接触点的滑动移动手势后触发（三个手指在设备周围移动）

swipefour在具有四个接触点的滑动移动手势后触发（四根手指在设备周围移动）

swipeup在严格向上滑动移动手势后触发

swiperightup在向右和向上滑动移动手势后触发

swiperight在严格向右滑动移动手势后触发

swiperightdown在向右*向上和向下滑动移动手势后触发

swipedown在严格向下滑动移动手势后触发

swipeleftdown在向左和向下滑动移动手势后触发

swipeleft在严格的向左滑动移动手势后触发

swipeleftup在向左和向上滑动移动手势后触发

tapone在单个（一根手指）点击手势后触发

taptwo在双（两个手指）点击手势后触发

tapthree在三次（三指）点击手势后触发

pinchopen当发生 pinchopen 手势（两个手指彼此远离）并且接触点（手指）从设备上移开时触发。

pinchclose当发生捏合手势（两个手指相对移动）并且接触点（手指）从设备上移开时触发。

rotatecw当顺时针旋转手势（两个手指顺时针旋转）发生并且接触点（手指）移开设备时触发。

rotateccw当逆时针旋转手势（两个手指逆时针旋转）发生并且接触点（手指）移开设备时触发。

回答by eivers88

If you want to use jQuery mobile for touch events only, add this piece of script beforeyou load the jQuery mobile library:

如果您只想将 jQuery mobile 用于触摸事件，请在加载 jQuery mobile 库之前添加这段脚本：

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

This prevents jquery mobile from initializing the page and touching the DOM, thus leaving your layout alone.

这可以防止 jquery mobile 初始化页面和接触 DOM，从而使您的布局不受影响。

回答by George

jQuery Mobile now has a Download Builder that lets you select only the parts that you want, in this case, you only need to select the Touch checkbox under the Event section.

jQuery Mobile 现在有一个下载生成器，可以让你只选择你想要的部分，在这种情况下，你只需要选中 Event 部分下的 Touch 复选框。

http://jquerymobile.com/download-builder/

http://jquerymobile.com/download-builder/

回答by Phill Pafford

jQM is now decoupled:

jQM 现在解耦了：

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Widgets: Now decoupled for flexible builds

We've wanted to decouple all our widgets from the page plugin for a long time now and we're happy to announce that we finally landed this change. So what exactly does decoupled mean anyway? Well, the individual widgets and utilities have always been broken out into separate script files. However, the page plugin was responsible for handling the auto-initialization all of the official plugins found in the markup at page creation. This situation made it impossible to remove plugins you don't need without causing errors, and generally set a bad precedent for future widget additions.

Now, pretty much all the UI widgets in the jQuery Mobile library are completely decoupled so they can simply be deleted if not needed for a particular project. This change allows you to dramatically reduce the size of the library by only including the specific set of widgets or features you need, in addition to the handful of required, core files. While we still plan to do more decoupling and cleanup, the following files are now decoupled and can safely be removed from the make file before you do a custom build:

• page header/content/footer
• collapsible
• controlgroup
• fieldcontain
• fixheaderfooter
• button
• checkboxradio
• select
• slider
• textinput
• links theming
• listview
• navbar
• grid

We will work on a dependency map because a few widgets rely on others to work. For example, the button markup plugin is called by many of the widgets above, so it can only be excluded but if you're not using any of the widgets that depend on buttons.

We're still working out our recommendations for mapping plugin dependencies and decoupling things even further. Ultimately, this will be surfaced in a download builder tool, so stay tuned!

小部件：现在为灵活构建解耦

长期以来，我们一直希望将所有小部件与页面插件分离，我们很高兴地宣布，我们终于实现了这一更改。那么，解耦到底是什么意思呢？好吧，各个小部件和实用程序总是被分解为单独的脚本文件。但是，页面插件负责处理页面创建时标记中发现的所有官方插件的自动初始化。这种情况使得在不引起错误的情况下删除您不需要的插件是不可能的，并且通常为未来的小部件添加设置了一个不好的先例。

现在，jQuery Mobile 库中的几乎所有 UI 小部件都已完全解耦，因此如果特定项目不需要它们，只需将其删除即可。除了少量必需的核心文件之外，此更改允许您仅包含所需的特定小部件或功能集，从而显着减小库的大小。虽然我们仍计划进行更多的解耦和清理，但以下文件现在已解耦，可以在进行自定义构建之前安全地从 make 文件中删除：

• 页眉/内容/页脚
• 可折叠的
• 控制组
• 字段包含
• 修复页脚
• 按钮
• 复选框收音机
• 选择
• 滑块
• 文本输入
• 链接主题
• 列表显示
• 导航栏
• 网格

我们将处理依赖关系图，因为一些小部件依赖于其他小部件才能工作。例如，按钮标记插件由上面的许多小部件调用，因此只能排除它，但如果您不使用任何依赖于按钮的小部件。

我们仍在制定映射插件依赖项和进一步解耦的建议。最终，这将在下载构建器工具中浮出水面，敬请期待！

You can head over to their GIT Repo and just download what you want:

您可以前往他们的 GIT Repo 并下载您想要的内容：

• https://github.com/jquery/jquery-mobile/tree/master/js

• https://github.com/jquery/jquery-mobile/tree/master/js

回答by BMH

Another new option is jQuery-Mobile-Events, I've been struggle with this problem and only find this plugin useful.

另一个新选项是jQuery-Mobile-Events，我一直在努力解决这个问题，只发现这个插件很有用。

The custom build from jQuery Mobile's Download Builder doesn't work for me. And jGesturesdoesn't have the tapholdevent which I need.

来自 jQuery Mobile 的下载生成器的自定义构建对我不起作用。而jGestures没有taphold我需要的事件。

回答by Casey Foster

In case anyone else runs into this (and doesn't need the file off one of jQuery's CDNs), here are the steps I took to extract just the JQM event triggers:

如果其他人遇到此问题（并且不需要 jQuery 的 CDN 之一的文件），以下是我仅提取 JQM 事件触发器所采取的步骤：

1. git clone [email protected]:jquery/jquery-mobile
2. cd jquery-mobile
3. edit js/jquery.mobile.jsin your favorite editor
4. replace the define(...);statement with define(['./events/touch', './events/orientationchange']);
5. make
6. your events-only JQM is now in compiled/jquery.mobile.jsand compiled/jquery.mobile.min.js

1. git clone [email protected]:jquery/jquery-mobile
2. cd jquery-mobile
3. 编辑js/jquery.mobile.js在编辑器
4. 将define(...);语句替换为define(['./events/touch', './events/orientationchange']);
5. make
6. 您的仅限事件的 JQM 现在在compiled/jquery.mobile.js和compiled/jquery.mobile.min.js

Now you can use $(el).tap(fn)and the like without worrying about JQM highHymaning your markup!

现在您可以使用$(el).tap(fn)等，而不必担心 JQM 劫持您的标记！

回答by Ady Ngom

taking care of this particular problem at init time is nearly impossible, your best bet is to use data-role="none" on the ui element that you do not want default styling to happen on as such:

在初始化时处理这个特定问题几乎是不可能的，最好的办法是在不希望默认样式发生的 ui 元素上使用 data-role="none" ：

<button type="button" data-role="none">Click Me!</button>?????????

check it out at http://jsfiddle.net/JGgrw/13/

在http://jsfiddle.net/JGgrw/13/查看

回答by Bmuzammil

Visit the link below and only Select TOUCH, Features that will be add are listed below each checkbox, so only select what you need and will possibly use. CDN will always include all features and will slow down the as file size will be larger but not much. I have tested and is working :)

访问下面的链接，仅选择 TOUCH，将添加的功能列在每个复选框下方，因此请仅选择您需要和可能使用的内容。CDN 将始终包含所有功能，并且会减慢速度，因为文件大小会更大但不多。我已经测试过并且正在工作:)

Working Example but (Full jQuery Mobile) with all features, simple use the one below or download the latest script of official website that is Custom: https://codepen.io/binaryfever/pen/RGjKGP

工作示例但（完整的 jQuery Mobile）具有所有功能，只需使用下面的一个或下载官方网站的最新自定义脚本：https: //codepen.io/binaryfever/pen/RGjKGP

http://jquerymobile.com/download-builder/Script below only supports the following features: Touch events including: touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop.

http://jquerymobile.com/download-builder/下面的脚本仅支持以下功能： 触摸事件包括：touchstart、touchmove、touchend、tap、taphold、swipe、swipeleft、swiperight、scrollstart、scrollstop。

/*! jQuery Mobile _ Custom Touch Only - v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function C(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function k(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function L(){g=!1}function A(){g=!0}function O(){E=0,v.length=0,m=!1,A()}function M(){L()}function _(){D(),c=setTimeout(function(){c=0,O()},e.vmouse.resetTimerDuration)}function D(){c&&(clearTimeout(c),c=0)}function P(t,n,r){var i;if(r&&r[t]||!r&&k(n.target,t))i=N(n,t),e(n.target).trigger(i);return i}function H(t){var n=e.data(t.target,s),r;!m&&(!E||E!==n)&&(r=P("v"+t.type,t),r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation()))}function B(t){var n=T(t).touches,r,i,o;n&&n.length===1&&(r=t.target,i=C(r),i.hasVirtualBinding&&(E=w++,e.data(r,s,E),D(),M(),d=!1,o=T(t).touches[0],h=o.pageX,p=o.pageY,P("vmouseover",t,i),P("vmousedown",t,i)))}function j(e){if(g)return;d||P("vmousecancel",e,C(e.target)),d=!0,_()}function F(t){if(g)return;var n=T(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=C(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;x<o.length;x++)e.event.special[o[x]]=U(o[x]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,i,s){var o=i.type;i.type=n,s?e.event.trigger(i,r,t):e.event.dispatch.call(t,i),i.type=o}var i=e(n),s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)}),e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})},teardown:function(){e(this).unbind(o)}},e.event.special.tap={tapholdThreshold:750,emitTapOnTaphold:!0,setup:function(){var t=this,n=e(t),r=!1;n.bind("vmousedown",function(s){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),!r&&o===e.target?l(t,"tap",e):r&&e.preventDefault()}r=!1;if(s.which&&s.which!==1)return!1;var o=s.target,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){e.event.special.tap.emitTapOnTaphold||(r=!0),l(t,"taphold",e.Event("taphold",{target:o}))},e.event.special.tap.tapholdThreshold)})},teardown:function(){e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"),i.unbind("vmousecancel")}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:30,getLocation:function(e){var n=t.pageXOffset,r=t.pageYOffset,i=e.clientX,s=e.clientY;if(e.pageY===0&&Math.floor(s)>Math.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(s<e.pageY-r||i<e.pageX-n)i=e.pageX-n,s=e.pageY-r;return{x:i,y:s}},start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y],origin:e(t.target)}},stop:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y]}},handleSwipe:function(t,n,r,i){if(n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold){var s=t.coords[0]>n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)});