~bcsaller/juju-gui/update-reductions

<p>It's a common UX pattern to close popups or trigger save or cancel actions when users do something in another area of a web page. This family of events makes setting up that behavior easy.</p>

<pre class="code prettyprint">node.on('clickoutside', function () {

this.hide('fadeOut');

});

survey.on('keyupoutside', heyYoureNotDoneYet);

// hide the overlay if the page focus moves somewhere outside the overlay's

// content area.

overlay.get('boundingBox').on('focusoutside', overlay.hide, overlay);</pre>

<p>When an outside event subscription is made on an element, the actual

subscription created is a <code>document</code> level subscription for the corresponding

DOM event. When a triggering event occurs on the page and bubbles up to the

<code>document</code>, its <code>e.target</code> is compared to the outside event subscriber. If the

event originated from an element outside the subscriber, the outside event

subscribers are executed.</p>

<p>An originating target is considered outside the subscriber if it is not the subscriber itself or any of the subscriber's descendants.</p>

<h2 id="predefined"><code>*outside</code></h2>

<p>The naming convention for outside events is <code><em><event></em>outside</code>.</p>

<p>The module creates the following events by default:</p>

<style>

#eventlist {

list-style: none;

margin: 0 0 0 1em;

padding: 0;

}

#eventlist ul {

list-style: none;

margin-left: 0;

margin-right: 2em;

padding: 0;

}

</style>

<ul>

<li><code><em>mousedown</em>outside</code></li>

<li><code><em>mouseup</em>outside</code></li>

<li><code><em>mouseover</em>outside</code></li>

<li><code><em>mouseout</em>outside</code></li>

<li><code><em>mousemove</em>outside</code></li>

</ul>

</li>

<ul>

<li><code><em>click</em>outside</code></li>

<li><code><em>dblclick</em>outside</code></li>

<li><code><em>keydown</em>outside</code></li>

100

<li><code><em>keyup</em>outside</code></li>

101

<li><code><em>keypress</em>outside</code></li>

102

</ul>

103

</li>

104

105

<ul>

106

<li><code><em>focus</em>outside</code></li>

107

<li><code><em>blur</em>outside</code></li>

108

<li><code><em>change</em>outside</code></li>

109

<li><code><em>select</em>outside</code></li>

110

<li><code><em>submit</em>outside</code></li>

111

</ul>

112

</li>

113

</ul>

114

115

<h2 id="defineoutside">Create more outside events</h2>

116

117

<p>Use the module's <code>Y.Event.defineOutside( triggeringEvent, [alternateName] )</code> method to create more outside

118

events.</p>

119

120

<pre class="code prettyprint">// Create a `touchstartoutside` event

121

Y.Event.defineOutside('touchstart');

122

123

// Create an outside event for another synthetic event and give it

124

// a different name.

125

Y.Event.defineOutside('tripleclick', 'omgletmeout');

126

127

// would have been tripleclickoutside

128

gooeymess.on('omgletmeout', okYouCanGo);</pre>

129

130

131

<h2 id="caveats">Caveats</h2>

132

133

<p>Outside events require DOM events to bubble to the <code>document</code> so the following caveats apply to their use:</p>

134

135

<ol>

136

<li>

137

Separate subscriptions for the triggering event added to any element

138

below the <code>document</code> will execute before the outside event.

139

</li>

140

<li>

141

If a subcriber from #1 calls <code>e.stopPropagation()</code>, the outside event

142

won't fire.

143

</li>

144

<li>

145

"outside" is determined by DOM hierarchy, not visual placement of an

146

element, so if a child element of the outside subscriber is placed

147

elsewhere on the page, clicking on that child will not trigger the

148

outside event.

149

</li>

150

<li>

151

Some DOM events do not bubble, and some (e.g. <code>submit</code> and <code>reset</code>)

152

bubble only in certain browsers. Unless a workaround synthetic event

153

such as <a href="focus.html"><code>event-focus</code></a> is in place,

154

outside versions of these events won't fire.

155

</li>

156

</ol>

157

</div>

158

</div>

159

</div>

160

161

162

163

164

165

166

<h2 class="no-toc">Table of Contents</h2>

167

</div>

168

169

170

171

<li>

172

<a href="#not-me-those-other-elements">Not me. Those other elements</a>

173

</li>

174

<li>

175

176

</li>

177

<li>

178

<a href="#predefined"><code>*outside</code></a>

179

</li>

180

<li>

181

<a href="#defineoutside">Create more outside events</a>

182

</li>

183

<li>

184

<a href="#caveats">Caveats</a>

185

</li>

186

</ul>

187

</div>

188

</div>

189

190

191

192

193

194

<h2 class="no-toc">Examples</h2>

195

</div>

196

197

198

199

200

201

202

<a href="basic-example.html">Simple DOM Events</a>

203

</li>

204

205

206

207

208

<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>

209

</li>

210

211

212

213

214

<a href="swipe-example.html">Supporting A Swipe Left Gesture</a>

215

</li>

216

217

218

219

220

221

222

223

224

225

226

227

228

</ul>

229

</div>

230

</div>

231

232

233

234

235

236

<h2 class="no-toc">Examples That Use This Component</h2>

237

</div>

238

239

240

241

242

243

244

245

246

247

248

249

250

<a href="../widget/widget-extend.html">Extending the Base Widget Class</a>

251

</li>

252

253

254

255

256

<a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>

257

</li>

258

259

260

261

262

<a href="../io/get.html">HTTP GET to request data</a>

263

</li>

264

265

266

267

268

<a href="../dd/photo-browser.html">Photo Browser</a>

269

</li>

270

271

272

273

274

<a href="../dd/portal-drag.html">Portal Style Example</a>

275

</li>

276

277

278

</ul>

279

</div>

280

</div>

281

282

</div>

283

</div>

284

</div>

285

</div>

286

287

288

289

290

</body>

291

</html>

Older »