Search jQuery

jQuery Forum

Screen name:
fcz0pa

fcz0pa's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

help. preventDefault, settimeout, and bubbling
[1Reply]
- 11-May-2012 06:18 AM
- Forum: Using jQuery
I'm having a problem writing event handling code for a custom checkbox control, and I'm hoping that someone here might be able to help.

The basic event handling for toggling the checkbox works fine; the problem lies with trying to match behaviour of proper checkbox controls as closely as possible, specifically in relation to interaction with other event handlers that may be attached to one of my checkboxes and which may call preventDefault().

Experimenting with a proper checkbox, with both an event handler attached directly to the control, and a delegate one created with .on(), if preventDefault() is called, it blocks the toggle of the checkmark. If one of these event handlers calls a function with setTimeout(), which calls preventDefault(), this is ignored and the checkmark is toggled. This is the behaviour I wish to emulate.

As can be seen with the code below, I tackle this by toggling the checkbox state, then doing a check of isDefaultPrevented() on the event within a setTimeout() call, which should execute immediately after all event handlers have executed (including bubbling). If any event handler called preventDefault() then I toggle the checkmark back again.

When an event handler (test #1) is attached directly to the checkbox, and calls preventDefault(), this works perfectly as intended. The problem lies with the delegated event handler, as in test #2. With the delegated event handler, if I click on the checkbox's label, it works perfectly as intended (change cancelled), however if I click directly on the checkbox, or set focus to it and press the space bar, it does not, the checkmark is toggled...

Behaviour is identical across Firefox, Chrome, Opera, IE8 and IE9, so it must be either something I'm doing or a bug in jQuery.
The custom checkbox control is as follows:
2. <div class="w-checkbox">
3. <div class="w-checkbox-checkmark" role="checkbox" aria-checked="false" aria-labelledby="lbl-1" tabindex="0"></div>
4. <div class="w-checkbox-label" id="lbl-1">Test</div>
5. <input type="checkbox" name="test1" class="w-checkbox-value" style="display:none;" />
6. </div>
The jQuery code is as follows:
2. $(function() {
4. // Fix for IE
5. // Unless the IE debugger is open, 'console' evaluates to undefined, and hence any console logging/debugging
6. // code lines will cause things to fail!
7. if (!window.console) console = { log: function() {} };
9. /* Checkbox Custom Input Control Widget */
10. $('div.w-checkbox').each(function(index, elem) {
11. $inst = $(this);
12. var $cm = $inst.find('div.w-checkbox-checkmark').eq(0); //Checkmark
13. var $cml = $inst.find('div.w-checkbox-label').eq(0); //Checkmark label
15. // Register toggle status events
16. $cm.on('click', {cm:$cm}, function(event) { action(event, event.data.cm); });
17. $cm.on('keydown', {cm:$cm}, function(event) { if (keyPressFilter(event, event.data.cm)) { action(event, event.data.cm); } }); //Certain key presses (SPACE key) when checkmark has focus should toggle it!
18. $cm.on('keypress', {cm:$cm}, function(event) { if (keyPressFilter(event, event.data.cm)) { return false; } }); //Cancel default action for keypress events, else pressing SPACE to toggle a checkmark jumps the page around also
19. $cml.on('click', {cm:$cm}, function(event) { event.data.cm.trigger('click'); }); //Clicking on label should trigger action on checkmark (best to trigger click event so all event handlers run)
21. // Register hover events
22. // These are registered on the label and should change the appearance of the checkbox on hovering over the label
23. $cml.on('mouseenter', {cm:$cm}, function() {
24. if ($cm.hasClass('w-checkbox-disabled')) { return; }
25. $cm.addClass('w-checkbox-hover');
26. });
27. $cml.on('mouseleave', {cm:$cm}, function() {
28. if ($cm.hasClass('w-checkbox-disabled')) { return; }
29. $cm.removeClass('w-checkbox-hover');
30. });
32. var keyPressFilter = function(event, $cm) {
33. if (event.keyCode && event.keyCode === $.ui.keyCode.SPACE) { return true; }
34. return false;
35. };
37. var action = function(event, $cm) {
39. // Ignore event if checkbox disabled
40. if ($cm.hasClass('w-checkbox-disabled')) { return; }
42. var $control = $cm.closest('div.w-checkbox');
43. var $cmv = $control.find('input.w-checkbox-value').eq(0);
45. var toggle = function() {
46. if ($cm.hasClass('w-checkbox-checked')) {
47. $cm.removeClass('w-checkbox-checked').attr('aria-checked', 'false');
48. $cmv.attr('checked', null);
49. } else {
50. $cm.addClass('w-checkbox-checked').attr('aria-checked', 'true');
51. $cmv.attr('checked', 'checked');
52. }
54. // Fix for IE, you need to shift focus so that the control updates, otherwise user must click something else to trigger blur event
55. $('body').focus();
56. $cm.focus();
57. };
59. toggle(); //Change checkbox state
61. // Reverse the action if another separate event cancels the action
62. // A timeout even is used here to ensure this check is performed after all event handlers for the event have run. Should any
63. // other event handler cancel the default action, reverse the change. Note, this is safe because even with standard checkboxes,
64. // if an event handler uses a settimeout and tries to cancel the event in it, the cancellation is ignored!
65. setTimeout(function() {
66. if (event.isDefaultPrevented()) {
67. toggle();
68. }
69. }, 0);
70. };
71. });
73. /* Test #1 */
74. /*$('div.w-checkbox-checkmark').on('click', function(event) { event.preventDefault(); });*/
76. /* Test #2 */
77. $('body').on('click', 'div.w-checkbox-checkmark', function(event) { event.preventDefault(); });
78. });
Any ideas?

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend