Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kill React.initializeTouchEvents for good #3442

Merged
merged 1 commit into from
Mar 19, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions docs/docs/03-interactivity-and-dynamic-uis.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ React.render(

With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.

If you'd like to use React on a touch device such as a phone or tablet, simply call `React.initializeTouchEvents(true);` to enable touch event handling.


## Under the Hood: Autobinding and Event Delegation

Expand Down
2 changes: 0 additions & 2 deletions docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ React.render(

React 里只需把事件处理器(event handler)以骆峰命名(camelCased)形式当作组件的 props 传入即可,就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说,React 知道如何冒泡和捕获事件,而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致,无论你使用哪种浏览器。

如果需要在手机或平板等触摸设备上使用 React,需要调用 `React.initializeTouchEvents(true);` 启用触摸事件处理。

## 幕后原理:自动绑定(Autobinding)和事件代理(Event Delegation)

在幕后,React 做了一些操作来让代码高效运行且易于理解。
Expand Down
9 changes: 0 additions & 9 deletions docs/docs/ref-01-top-level-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,15 +150,6 @@ If this component has been mounted into the DOM, this returns the corresponding
`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](/react/docs/reusable-components.html).


### React.initializeTouchEvents

```javascript
initializeTouchEvents(boolean shouldUseTouch)
```

Configure React's event system to handle touch events on mobile devices.


### React.Children

`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
Expand Down
3 changes: 0 additions & 3 deletions docs/docs/ref-05-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,6 @@ boolean shiftKey

### Touch events

To enable touch events, call `React.initializeTouchEvents(true)` before
rendering any component.

Event names:

```
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/ref-05-events.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,6 @@ boolean shiftKey

### 触控事件

在渲染任意组件之前调用 `React.initializeTouchEvents(true)`,以启用触控事件。

事件名称:

```
Expand Down
18 changes: 7 additions & 11 deletions src/browser/eventPlugins/TapEventPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,18 @@ function getDistance(coords, nativeEvent) {
);
}

var dependencies = [
topLevelTypes.topMouseDown,
topLevelTypes.topMouseMove,
topLevelTypes.topMouseUp
];

var touchDependencies = [
var touchEvents = [
topLevelTypes.topTouchStart,
topLevelTypes.topTouchCancel,
topLevelTypes.topTouchEnd,
topLevelTypes.topTouchMove
];

if (EventPluginUtils.useTouchEvents) {
dependencies = dependencies.concat(touchDependencies);
}
var dependencies = [
topLevelTypes.topMouseDown,
topLevelTypes.topMouseMove,
topLevelTypes.topMouseUp
].concat(touchEvents);

var eventTypes = {
touchTap: {
Expand Down Expand Up @@ -112,7 +108,7 @@ var TapEventPlugin = {
// on ios, there is a delay after touch event and synthetic
// mouse events, so that user can perform double tap
// solution: ignore mouse events following touchevent within small timeframe
if (touchDependencies.indexOf(topLevelType) !== -1) {
if (touchEvents.indexOf(topLevelType) !== -1) {
usedTouch = true;
usedTouchTime = Date.now();
} else {
Expand Down
4 changes: 0 additions & 4 deletions src/browser/ui/React.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

'use strict';

var EventPluginUtils = require('EventPluginUtils');
var ReactChildren = require('ReactChildren');
var ReactComponent = require('ReactComponent');
var ReactClass = require('ReactClass');
Expand Down Expand Up @@ -60,9 +59,6 @@ var React = {
Component: ReactComponent,
DOM: ReactDOM,
PropTypes: ReactPropTypes,
initializeTouchEvents: function(shouldUseTouch) {
EventPluginUtils.useTouchEvents = shouldUseTouch;
},
createClass: ReactClass.createClass,
createElement: createElement,
cloneElement: cloneElement,
Expand Down
3 changes: 1 addition & 2 deletions src/event/EventPluginUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,7 @@ var EventPluginUtils = {
executeDispatchesInOrder: executeDispatchesInOrder,
executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,
hasDispatches: hasDispatches,
injection: injection,
useTouchEvents: false
injection: injection
};

module.exports = EventPluginUtils;