Skip to content
Browse files

- enhancing Pseudos.Stop to include all 3 :stop, :stopPropagation an…

…d :preventDefault

 - added Specs for all 3 pseudos
 - updated docs
  • Loading branch information...
1 parent e773337 commit 23ac33af261e23987e12079647b7f724b38fe55c @w00fz w00fz committed with May 26, 2011
View
90 Docs/Element/Element.Event.Pseudos.Stop.md
@@ -0,0 +1,90 @@
+Element.Event.Pseudo.Stop {#Pseudos}
+=====================================
+
+Defines `:stopPropagation`, `:preventDefault` and `:stop` Element Event Pseudo.
+
+### See Also
+
+- [Element.Event.Pseudos][]
+- [Element.Event.Pseudos.Keys][]
+
+Pseudo: stopPropagation {#Pseudos:stopPropagation}
+----------------------------
+
+The event will fires normally and be already be prevented from propagating.
+
+### Example
+
+#### HTML:
+
+ <div id="myElement">
+ <div id="myChild"></div>
+ </div>
+
+#### JavaScript
+
+ document.id('myElement').addEvent('click:stopPropagation', function(event){
+ // we don't need to event.stopPropagation() anymore
+ alert('myElement has been clicked');
+ });
+
+ document.id('myChild').addEvent('click:stopPropagation', function(event){
+ alert('myChild has been clicked but myElement won't fire up');
+ });
+
+### See Also:
+
+- [Event:stopPropagation][]
+
+
+Pseudo: preventDefault {#Pseudos:preventDefault}
+----------------------------
+
+The event will fires normally and be already be prevented from running the default action of the event.
+
+### Example
+
+#### HTML:
+
+ <form>
+ <input id="myCheckbox" type="checkbox" />
+ </form>
+
+##### JavaScript
+
+ document.id('myCheckbox').addEvent('click:preventDefault', function(event){
+ // we don't need to event.preventDefault() anymore
+ alert('The checkbox has been clicked but wont get checked');
+ });
+
+### See Also:
+
+- [Event:preventDefault][]
+
+
+Pseudo: stop {#Pseudos:stop}
+----------------------------
+
+The event will fires normally without the need of preventDefault and stopPropagation.
+
+### Examples
+
+ myTextarea.addEvent('keydown:stop', function(){
+ console.log('Nothing I press appears in the textarea');
+ });
+
+ myLink.addEvent('click:stop', function(){
+ alert('You clicked a link which is not redirecting.');
+ });
+
+### See Also:
+
+- [Event:stop][]
+
+
+
+[Element.Event.Pseudos]: /more/Element/Element.Event.Pseudos
+[Element.Event.Pseudos.Keys]: /more/Element/Element.Event.Pseudos.Keys
+[Event:stopPropagation]: /core/Types/Event#Event:preventDefault
+[Event:preventDefault]: /core/Types/Event#Event:preventDefault
+[Event:stop]: /core/Types/Event#Event:stop
View
30 Source/Element/Element.Event.Pseudos.Stop.js
@@ -0,0 +1,30 @@
+/*
+---
+
+name: Element.Event.Pseudos.Stop
+
+description: Adds the functionality to preventDefault and stopPropagation on events
+
+license: MIT-style license
+
+authors:
+ - Djamil Legato
+ - Arian Stolwijk
+
+requires: [Element.Event.Pseudos]
+
+provides: [Element.Event.Pseudos.Stop]
+
+...
+*/
+
+(function(){
+
+['stop', 'preventDefault', 'stopPropagation'].each(function(method){
+ Event.definePseudo(method, function(split, fn, args){
+ args[0][method]();
+ fn.apply(this, args);
+ });
+});
+
+})();
View
77 Specs/1.3/Element/Element.Event.Pseudos.Stop.js
@@ -0,0 +1,77 @@
+
+// Only run this spec in browsers other than IE6-8 because they can't properly simulate key events
+if (window.addEventListener) describe('Element.Event.Pseudos.Stop', function(){
+
+ it('stop: should prevent propagating events', function(){
+
+ var called = false, called2 = false;
+
+ var inputs = {
+ pseudo: new Element('input[value=limonata]').inject(document.body),
+ normal: new Element('input[value=limonata]').inject(document.body)
+ },
+ checkboxes = {
+ pseudo: new Element('input[type=checkbox]').inject(document.body),
+ normal: new Element('input[type=checkbox]').inject(document.body)
+ },
+ divs = {
+ pseudo: {
+ element: new Element('div').inject(document.body),
+ child: new Element('div').inject(document.body)
+ },
+ normal: {
+ element: new Element('div').inject(document.body),
+ child: new Element('div').inject(document.body)
+ }
+ };
+
+ // stop
+ inputs.pseudo.addEvent('keydown:stop', function(){});
+ inputs.normal.addEvent('keydown', function(){});
+
+ simulateEvent('type', ['#', inputs.pseudo], function(){
+ expect(inputs.pseudo.get('value')).toEqual('limonata');
+ $(inputs.pseudo).destroy();
+ });
+
+ simulateEvent('type', ['#', inputs.normal], function(){
+ expect(inputs.normal.get('value')).toEqual('limonata#');
+ $(inputs.normal).destroy();
+ });
+
+ // preventDefault
+ checkboxes.pseudo.addEvent('click:preventDefault', function(){});
+ checkboxes.normal.addEvent('click', function(){});
+
+ simulateEvent('click', [{}, checkboxes.pseudo], function(){
+ expect(checkboxes.pseudo.get('checked')).toBe(false);
+ $(checkboxes.pseudo).destroy();
+ });
+
+ simulateEvent('click', [{}, checkboxes.normal], function(){
+ expect(checkboxes.normal.get('checked')).toBe(true);
+ $(checkboxes.normal).destroy();
+ });
+
+ // stopPropagation
+ divs.pseudo.child.inject(divs.pseudo.element);
+ divs.normal.child.inject(divs.normal.element);
+
+ divs.pseudo.element.addEvent('click:stopPropagation', function(){ called = true; });
+ divs.pseudo.child.addEvent('click:stopPropagation', function(){});
+ divs.normal.element.addEvent('click', function(){ called2 = true; });
+ divs.normal.child.addEvent('click', function(){});
+
+ simulateEvent('click', [{}, divs.pseudo.child], function(){
+ expect(called).toBe(false);
+ $(divs.pseudo.element).destroy();
+ });
+
+ simulateEvent('click', [{}, divs.normal.child], function(){
+ expect(called2).toBe(true);
+ $(divs.normal.element).destroy();
+ });
+
+ });
+
+});

0 comments on commit 23ac33a

Please sign in to comment.
Something went wrong with that request. Please try again.