Skip to content

Commit 23ac33a

Browse files
w00fztimwienk
authored andcommitted
- enhancing Pseudos.Stop to include all 3 :stop, :stopPropagation and :preventDefault
- added Specs for all 3 pseudos - updated docs
1 parent e773337 commit 23ac33a

File tree

3 files changed

+197
-0
lines changed

3 files changed

+197
-0
lines changed
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
Element.Event.Pseudo.Stop {#Pseudos}
2+
=====================================
3+
4+
Defines `:stopPropagation`, `:preventDefault` and `:stop` Element Event Pseudo.
5+
6+
### See Also
7+
8+
- [Element.Event.Pseudos][]
9+
- [Element.Event.Pseudos.Keys][]
10+
11+
Pseudo: stopPropagation {#Pseudos:stopPropagation}
12+
----------------------------
13+
14+
The event will fires normally and be already be prevented from propagating.
15+
16+
### Example
17+
18+
#### HTML:
19+
20+
<div id="myElement">
21+
<div id="myChild"></div>
22+
</div>
23+
24+
#### JavaScript
25+
26+
document.id('myElement').addEvent('click:stopPropagation', function(event){
27+
// we don't need to event.stopPropagation() anymore
28+
alert('myElement has been clicked');
29+
});
30+
31+
document.id('myChild').addEvent('click:stopPropagation', function(event){
32+
alert('myChild has been clicked but myElement won't fire up');
33+
});
34+
35+
### See Also:
36+
37+
- [Event:stopPropagation][]
38+
39+
40+
Pseudo: preventDefault {#Pseudos:preventDefault}
41+
----------------------------
42+
43+
The event will fires normally and be already be prevented from running the default action of the event.
44+
45+
### Example
46+
47+
#### HTML:
48+
49+
<form>
50+
<input id="myCheckbox" type="checkbox" />
51+
</form>
52+
53+
##### JavaScript
54+
55+
document.id('myCheckbox').addEvent('click:preventDefault', function(event){
56+
// we don't need to event.preventDefault() anymore
57+
alert('The checkbox has been clicked but wont get checked');
58+
});
59+
60+
### See Also:
61+
62+
- [Event:preventDefault][]
63+
64+
65+
Pseudo: stop {#Pseudos:stop}
66+
----------------------------
67+
68+
The event will fires normally without the need of preventDefault and stopPropagation.
69+
70+
### Examples
71+
72+
myTextarea.addEvent('keydown:stop', function(){
73+
console.log('Nothing I press appears in the textarea');
74+
});
75+
76+
myLink.addEvent('click:stop', function(){
77+
alert('You clicked a link which is not redirecting.');
78+
});
79+
80+
### See Also:
81+
82+
- [Event:stop][]
83+
84+
85+
86+
[Element.Event.Pseudos]: /more/Element/Element.Event.Pseudos
87+
[Element.Event.Pseudos.Keys]: /more/Element/Element.Event.Pseudos.Keys
88+
[Event:stopPropagation]: /core/Types/Event#Event:preventDefault
89+
[Event:preventDefault]: /core/Types/Event#Event:preventDefault
90+
[Event:stop]: /core/Types/Event#Event:stop
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
---
3+
4+
name: Element.Event.Pseudos.Stop
5+
6+
description: Adds the functionality to preventDefault and stopPropagation on events
7+
8+
license: MIT-style license
9+
10+
authors:
11+
- Djamil Legato
12+
- Arian Stolwijk
13+
14+
requires: [Element.Event.Pseudos]
15+
16+
provides: [Element.Event.Pseudos.Stop]
17+
18+
...
19+
*/
20+
21+
(function(){
22+
23+
['stop', 'preventDefault', 'stopPropagation'].each(function(method){
24+
Event.definePseudo(method, function(split, fn, args){
25+
args[0][method]();
26+
fn.apply(this, args);
27+
});
28+
});
29+
30+
})();
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
2+
// Only run this spec in browsers other than IE6-8 because they can't properly simulate key events
3+
if (window.addEventListener) describe('Element.Event.Pseudos.Stop', function(){
4+
5+
it('stop: should prevent propagating events', function(){
6+
7+
var called = false, called2 = false;
8+
9+
var inputs = {
10+
pseudo: new Element('input[value=limonata]').inject(document.body),
11+
normal: new Element('input[value=limonata]').inject(document.body)
12+
},
13+
checkboxes = {
14+
pseudo: new Element('input[type=checkbox]').inject(document.body),
15+
normal: new Element('input[type=checkbox]').inject(document.body)
16+
},
17+
divs = {
18+
pseudo: {
19+
element: new Element('div').inject(document.body),
20+
child: new Element('div').inject(document.body)
21+
},
22+
normal: {
23+
element: new Element('div').inject(document.body),
24+
child: new Element('div').inject(document.body)
25+
}
26+
};
27+
28+
// stop
29+
inputs.pseudo.addEvent('keydown:stop', function(){});
30+
inputs.normal.addEvent('keydown', function(){});
31+
32+
simulateEvent('type', ['#', inputs.pseudo], function(){
33+
expect(inputs.pseudo.get('value')).toEqual('limonata');
34+
$(inputs.pseudo).destroy();
35+
});
36+
37+
simulateEvent('type', ['#', inputs.normal], function(){
38+
expect(inputs.normal.get('value')).toEqual('limonata#');
39+
$(inputs.normal).destroy();
40+
});
41+
42+
// preventDefault
43+
checkboxes.pseudo.addEvent('click:preventDefault', function(){});
44+
checkboxes.normal.addEvent('click', function(){});
45+
46+
simulateEvent('click', [{}, checkboxes.pseudo], function(){
47+
expect(checkboxes.pseudo.get('checked')).toBe(false);
48+
$(checkboxes.pseudo).destroy();
49+
});
50+
51+
simulateEvent('click', [{}, checkboxes.normal], function(){
52+
expect(checkboxes.normal.get('checked')).toBe(true);
53+
$(checkboxes.normal).destroy();
54+
});
55+
56+
// stopPropagation
57+
divs.pseudo.child.inject(divs.pseudo.element);
58+
divs.normal.child.inject(divs.normal.element);
59+
60+
divs.pseudo.element.addEvent('click:stopPropagation', function(){ called = true; });
61+
divs.pseudo.child.addEvent('click:stopPropagation', function(){});
62+
divs.normal.element.addEvent('click', function(){ called2 = true; });
63+
divs.normal.child.addEvent('click', function(){});
64+
65+
simulateEvent('click', [{}, divs.pseudo.child], function(){
66+
expect(called).toBe(false);
67+
$(divs.pseudo.element).destroy();
68+
});
69+
70+
simulateEvent('click', [{}, divs.normal.child], function(){
71+
expect(called2).toBe(true);
72+
$(divs.normal.element).destroy();
73+
});
74+
75+
});
76+
77+
});

0 commit comments

Comments
 (0)