/
releasing.html
134 lines (105 loc) · 4.86 KB
/
releasing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html><head><title>Docs
</title><meta http-equiv: 'Content-Type' content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
margin: 0px;
margin-bottom:1em;
font-family: sans-serif;
font-size: 10px;
line-height:1.2;
}
.content { font-size: 14px; }
code {
font-family: Monaco, Inconsolata, Courier, fixed-width;
font-size: 12px;
}
pre code {
margin-right: 1em;
border: 1px solid #a0b0a0;
overflow-y: hidden;
overflow-x: auto;
background: #f5f9f5;
display:block;
padding: 1em;
}
a { text-decoration: none; color: rgb(50, 50, 155); }
.header {
background-color: rgb(38, 43, 50);
height: 60px;
padding-top:17px;
padding-bottom:17px;
padding-left:2em;
}
.header a.img {
float: left;
}
.header .here {
float:left;
margin-top:27px;
margin-left:5px;
color: rgb(200, 255, 200);
font-size: 25px;
}
.header span.here {
margin-top:34px;
font-size:15px;
color: white;
}
.header a.item {
float:right;
margin-top: 34px;
margin-right:10px;
color: white;
font-size:15px;
}
.header a.item:hover {
text-decoration: underline;
}
.content {
padding-top: 1em;
padding-left: 2em;
padding-right: 2em;
}
img { margin-left: auto; margin-right: auto; display: block; }
h1, h2, h3 { color: rgb(100, 155, 100); }
code .class { color: rgb(0, 0, 150); }
/*code .variable { color: rgb(10, 70, 10); }*/
code .comment { color: rgb(100, 150, 200); }
code .string { color: rgb(0, 100, 10); }
code .number { color: rgb(0, 0, 255); }
code .keyword, code .this { color: rgb(25, 110, 25); font-weight: bold; }
</style>
</head><body><div class="header"><a href="../../index.html" class="img"><img src="../../resources/logo.png" /></a><a href="../../index.html" class="here">Documentation
</a><a href="../../reference/index.html" class="item">SproutCore Reference
</a></div><div class="content"><h1>Releasing</h1>
<p>Why would you want to give up a touch? Imagine that your control is inside a <code class='syntax js'><span class="class">SC</span>.<span class="class">ScrollView</span></code>:
if the touch moves too much, perhaps it should be considered a scroll, rather than an
action for your control.</p>
<p>From touchesDragged, you would give up touch responder status through a line like this:</p>
<pre><code class='syntax js'><span class="variable">someTouch</span>.<span class="variable">makeTouchResponder</span>(<span class="variable">someTouch</span>.<span class="variable">nextTouchResponder</span>);
</code></pre>
<p>The touch's nextTouchResponder is the responder that is the <em>parent</em> touch responder; through
devious trickery (see <em>Capturing Touches</em>), ScrollView receives touch responder status <em>before</em>
other views; further, it doesn't just hand touch responder status to the target view (your view)--
it adds the responder to a stack of touch responders for the touch, so the responders can easily
return to their parent responder (which is what you do with the above line of code.)</p>
<p>Remember, though, that touchesDragged is called with a set of touches. It is really easy
to change the responder for all of the touches simultaneously, should you wish to do so:</p>
<pre><code class='syntax js'><span class="variable">touches</span>.<span class="variable">forEach</span>(<span class="keyword">function</span>(<span class="variable">touch</span>){
<span class="variable">touch</span>.<span class="variable">makeTouchResponder</span>(<span class="variable">touch</span>.<span class="variable">nextTouchResponder</span>);
});
</code></pre>
<p>Perhaps you want to pass control only if the responder is scrollable:</p>
<pre><code class='syntax js'><span class="keyword">if</span> (<span class="variable">touch</span>.<span class="variable">nextTouchResponder</span> && <span class="variable">touch</span>.<span class="variable">nextTouchResponder</span>.<span class="variable">isScrollable</span>) {
<span class="variable">touch</span>.<span class="variable">makeTouchResponder</span>(<span class="variable">touch</span>.<span class="variable">nextTouchResponder</span>);
}
</code></pre>
<p><code class='syntax js'><span class="variable">touchCancelled</span></code> will be called on your view automatically.</p>
<h2>What Does It Look Like?</h2>
<p>In this example, there is a single white box, containing a gray inner box. When you press
on the inner box, the outer box will capture the touch first. After a delay, it re-captures
by calling captureTouch, and the inner view receives it. This is just like the "Capturing" demo.</p>
<p>However, the inner view, after a second, will release it back.</p>
<p><a href='releasing.js' class='demo'>releasing.js</a></p>
</div><div class="footer"></div></body></html>