StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODelaying default events in Javascript
text
Body
copied!<p>I would like to be able to delay the default action of an event until some other action has been taken.</p> <p><strong>What it's for:</strong> I'm trying to build a reusable, unobtrusive way to confirm actions with a modal-type dialogue. The key wishlist item is that any javascript handlers are attached by a script, and not written directly inline.</p> <p>To make this truly reusable, I want to use it on different types of items: html links, checkboxes, and even other javascript-driven actions. And for purely HTML elements like links or checkboxes, I want them to degrade gracefully so they're usable without javascript turned on.</p> <p>Here's how I would envision the implementation:</p> <pre><code><a href="/somelink/" class="confirm">Some Link</a> _________ <script> attachEvent('a.confirm','click', confirmAction.fire) var confirmAction = (function(){ var public = { fire: function(e){ e.default.suspend(); this.modal(); }, modal: function(){ showmodal(); yesbutton.onclick = this.confirmed; nobutton.onclick = this.canceled; }, confirmed: function(){ hidemodal(); e.default.resume(); }, canceled: function(){ hidemodal(); e.default.prevent(); } } return public; })() </script> </code></pre> <p>I know about the <code>e.preventDefault</code> function, but that will kill the default action without giving me the ability to resume it. Obviously, the <code>default</code> object with the <code>suspend</code>, <code>resume</code> and <code>prevent</code> methods is made up to illustrate my desired end.</p> <p>By the way, I'm building this using the <a href="http://www.extjs.com/products/extcore/manual/" rel="nofollow noreferrer">Ext.Core</a> library, if that helps. The library provides a good deal of normalization for handling events. But I'm really very interested in learning the general principles of this in Javascript.</p> <p>Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload