diff --git a/Docs/Element/Element.Event.Pseudos.Stop.md b/Docs/Element/Element.Event.Pseudos.Stop.md new file mode 100644 index 00000000..cca6e7dd --- /dev/null +++ b/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: + +
+
+
+ +#### 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: + +
+ +
+ +##### 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 \ No newline at end of file diff --git a/Source/Element/Element.Event.Pseudos.Stop.js b/Source/Element/Element.Event.Pseudos.Stop.js new file mode 100644 index 00000000..b25bb834 --- /dev/null +++ b/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); + }); +}); + +})(); \ No newline at end of file diff --git a/Specs/1.3/Element/Element.Event.Pseudos.Stop.js b/Specs/1.3/Element/Element.Event.Pseudos.Stop.js new file mode 100644 index 00000000..cecdfb1c --- /dev/null +++ b/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(); + }); + + }); + +}); diff --git a/Specs/Configuration.js b/Specs/Configuration.js index 05b87bf9..5e6ec3de 100644 --- a/Specs/Configuration.js +++ b/Specs/Configuration.js @@ -53,7 +53,7 @@ Configuration.sets = { files: [ 'Class/Class.Occlude', 'Element/Element.Forms', 'Element/Element.Measure', 'Element/Elements.From', 'Element/Element.Shortcuts', - 'Element/Element.Event.Pseudos', 'Element/Element.Event.Pseudos.Keys', 'Element/Element.Delegation', 'Element/Element.Pin', 'Element/Element.Position', + 'Element/Element.Event.Pseudos', 'Element/Element.Event.Pseudos.Keys', 'Element/Element.Event.Pseudos.Stop', 'Element/Element.Delegation', 'Element/Element.Pin', 'Element/Element.Position', 'Types/URI', 'Types/URI.Relative', 'Types/Object.Extras_client', 'Interface/Keyboard', 'Interface/Keyboard.Extras', 'Interface/HtmlTable', 'Interface/HtmlTable.Sort', 'Interface/HtmlTable.Select', 'Interface/Htmltable.Zebra', 'Forms/Form.Validator', @@ -171,6 +171,7 @@ Configuration.source = { 'Element/Element.Event.Pseudos', 'Element/Element.Event.Pseudos.Keys', + 'Element/Element.Event.Pseudos.Stop', 'Element/Element.Delegation', 'Element/Element.Pin', diff --git a/package.yml b/package.yml index 0c850620..0f766ee2 100644 --- a/package.yml +++ b/package.yml @@ -36,6 +36,7 @@ sources: - "Source/Element/Elements.From.js" - "Source/Element/Element.Event.Pseudos.js" - "Source/Element/Element.Event.Pseudos.Keys.js" + - "Source/Element/Element.Event.Pseudos.Stop.js" - "Source/Element/Element.Delegation.js" - "Source/Element/Element.Measure.js" - "Source/Element/Element.Pin.js"